Upload artwork using drag and drop or click to browse using track edit.

airtime_mvc/public/js/airtime/library/library.js

@@ -1601,6 +1601,70 @@ var validationTypes = {
 };
 
 
+function readArtworkURL(input, id) {
+
+    if (input.files && input.files[0]) {
+        var reader = new FileReader();
+        reader.onload = function(e) {
+            $('.artwork-preview-'+id).css('background-image', 'url('+e.target.result +')');
+            $('.artwork-preview-'+id).hide();
+            $('.artwork-preview-'+id).fadeIn(500);
+            $('.artwork_uploaded_'+id).val(function() {
+                return e.target.result;
+            });
+        }
+        reader.readAsDataURL(input.files[0]);
+    }
+}
+
+// Resample Artwork
+var resampleImg = (function (canvas) {
+
+    function resampleImg(img, width, height, onresample) {
+        var load = typeof img == "string",
+        i = load || img;
+        if (load) {
+            i = new Image;
+            i.onload = onload;
+            i.onerror = onerror;
+        }
+        i._onresample = onresample;
+        i._width = width;
+        i._height = height;
+        load ? (i.src = img) : onload.call(img);
+    }
+
+    function onerror() {
+        throw ("not found: " + this.src);
+    }
+
+    function onload() {
+        var img = this,
+        width = img._width,
+        height = img._height,
+        onresample = img._onresample;
+
+        var minValue = Math.min(img.height, img.width);
+        width == null && (width = round(img.width * height / img.height));
+        height == null && (height = round(img.height * width / img.width));
+
+        delete img._onresample;
+        delete img._width;
+        delete img._height;
+        canvas.width = width;
+        canvas.height = height;
+        context.drawImage(img,0,0,minValue,minValue,0,0,width,height);
+        onresample(canvas.toDataURL("image/jpeg"));
+    }
+
+    var context = canvas.getContext("2d"),
+          round = Math.round;
+
+    return resampleImg;
+
+}(this.document.createElement("canvas")));
+
+
 $(document).ready(function() {
     if (window.location.href.indexOf("showbuilder") > -1) {
         AIRTIME.library.initPodcastDatatable();
@@ -1613,5 +1677,95 @@ $(document).ready(function() {
     $(window).resize(function() {
         resizeAdvancedSearch();
     });
-});
 
+    // image upload by clicking on the artwork container
+    $(document).on('change', '.artworkUpload', 'input', function(event) {
+        event.preventDefault();
+        event.stopPropagation();
+        var id = $(this).attr('data-id');
+        readArtworkURL(this, id);
+    });
+
+    // image upload by dragging onto the artwork container
+    $.event.props.push('dataTransfer');
+    (function() {
+
+        var s;
+        var Artwork = {
+            settings: {
+              body: $("body")
+            },
+            init: function() {
+                s = Artwork.settings;
+                Artwork.bindUIActions();
+            },
+            bindUIActions: function() {
+
+                var timer;
+                s.body.on('dragover', '.artwork-upload', function(event) {
+
+                    event.preventDefault();
+                    event.stopPropagation();
+                    clearTimeout(timer);
+                    Artwork.showDroppableArea();
+                    return false;
+                });
+                s.body.on('dragleave', '.artwork-upload', function(event) {
+
+                    event.preventDefault();
+                    event.stopPropagation();
+                    timer = setTimeout(function() {
+                        Artwork.hideDroppableArea();
+                    }, 200);
+                });
+                s.body.on('drop', '.artwork-upload', function(event) {
+                    event.preventDefault();
+                    event.stopPropagation();
+                    var id = $(this).attr('data-id');
+                    Artwork.handleDrop(event.dataTransfer.files, id);
+                });
+
+            },
+            showDroppableArea: function() {
+                s.body.addClass("droppable");
+            },
+            hideDroppableArea: function() {
+                s.body.removeClass("droppable");
+            },
+            handleDrop: function(files, id) {
+                Artwork.hideDroppableArea();
+                var file = files[0];
+                if (typeof file !== 'undefined' && file.type.match('image.*')) {
+                    Artwork.resizeImage(file, 512, function(data) {
+                        Artwork.placeImage(data, id);
+                    });
+                } else {
+                    alert("The file is not an image.");
+                }
+            },
+            resizeImage: function(file, size, callback) {
+                var fileTracker = new FileReader;
+                fileTracker.onload = function() {
+                    resampleImg(this.result, size, size, callback);
+                }
+                fileTracker.readAsDataURL(file);
+                fileTracker.onabort = function() {
+                    alert("Upload aborted!");
+                }
+                fileTracker.onerror = function() {
+                    alert("File could not be read.");
+                }
+            },
+            placeImage: function(data, id) {
+                $('.artwork-preview-'+id).css('background-image', 'url('+ data +')');
+                $('.artwork-preview-'+id).hide();
+                $('.artwork-preview-'+id).fadeIn(500);
+                $('.artwork_uploaded_'+id).val(function() {
+                    return data;
+                });
+            }
+        }
+        Artwork.init();
+    })();
+
+});