Jquery : upload file (drag or upload)

by dshilkret

HTML

<div id="upload">
<p>Drag your file or upload it</p>
<input type="file">
</div>

CSS

#upload {
    border: 2px dashed lightgrey;
    margin-bottom: 15px;
    padding: 10px;
    text-align: center;
    position: relative;
}
#upload.is-dragover {
    background-color: rgba(0, 0, 0, 0.05);
}
#upload .loader {
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background-color: #f5f5f5;
}
#upload .loader .fa-spinner {
     margin-top: 0.5em;
}

JavaScript

var Upload = {

    // Handle events it the box
    init: function() {
        var upload = $("#upload");
        upload.on('drag dragstart dragend dragover dragenter dragleave drop', function(e) {
            e.preventDefault();
            e.stopPropagation();
        })
        .on('dragover dragenter', function() { upload.addClass('is-dragover'); })
        .on('dragleave dragend drop', function() { upload.removeClass('is-dragover'); })
        .on('drop', function(e) {
            files = e.originalEvent.dataTransfer.files;
            Upload.submit(files);
        });

        upload.on('change', 'input', function(e) {
          Upload.submit(this.files);
        });
    },
    
    // Check the uploaded file
    submit: function(files) {

        // Check file extension and size
        var file = files[0];
        var type = file['type'].substr(0, file['type'].indexOf('/'));
        if(type != 'image') {
            alert('This file type is not supported. Only images should be uploaded');
            return;
        }
        if(file['size'] > 10485760) {
            alert('This file is too heavy, it weights more than 10M');
            return;
        }
        Upload.display(file);
    },
    
    // Display an uploaded file
    display: function(file) {
        var img    = document.createElement("img");
        var reader = new FileReader();
        reader.onloadend = function() {
          img.src = reader.result;
        }
        reader.readAsDataURL(file);
        $("body").append(img);
    },
    
    // Upload via AJAX
    upload: function(file) {
        var loader = $('<div class="loader">'
                        + '<i class="fa fa-spinner fa-pulse fa-3x fa-fw margin-bottom"></i>'
                    + '</div>').prependTo($('#upload'));
                    
        // Create a form
        var fd = new FormData();
        fd.append('image', file);
          
        $.ajax({
            url: '...',
            data: fd,
           ...