Drag 'n' Drop

Time to rock and roll with some mother 'effin drag 'n' drop

by AaronLayton

HTML

<script src="https://raw.github.com/weixiyen/jquery-filedrop/master/jquery.filedrop.js"></script>
<div id="dropzone">
    <span class="message"><b>Drag and Drop files here</b><i>(Will only work on newer browsers)</i></span>
</div>

CSS

body { padding:30px }
#dropzone {
    background:#eee;
    border:2px solid #ddd;
    border-radius: 12px;
    min-height:165px;
    overflow:hidden;
    padding:0 35px 35px 0;
}
#dropzone.hover {
    background:#e4e4e4;
    border:2px dashed #aaa;
}
#dropzone .message { 
    display:block;
    font-family:arial;
    font-size:11px;
    margin:84px 0 0;
    text-align:center;
}
#dropzone .message i {
    color:#aaa;
    display:block;
    font-style:italics'
}

/*-------------------------
    Image Previews
--------------------------*/

#dropzone .preview{
    width:120px;
    height: 130px;
    float:left;
    margin: 35px 0 0 35px;
    position: relative;
    text-align: center;
}

#dropzone .preview img{
    max-width: 240px;
    max-height:180px;
    border:3px solid #fff;
    display: block;

    box-shadow:0 0 2px #000;
}

#dropzone .imageHolder{
    display: inline-block;
    position:relative;
}

#dropzone .uploaded{
    position: absolute;
    top:0;
    left:0;
    height:100%;
    width:100%;
    background: url('../img/done.png') no-repeat center center rgba(255,255,255,0.5);
    display: none;
}

#dropzone .preview.done .uploaded{
    display: block;
}

/*-------------------------
    Progress Bars
--------------------------*/

#dropzone .progressHolder{
    position: absolute;
    background-color:#252f38;
    height:12px;
    width:100%;
    left:0;
    bottom: 0;

    box-shadow:0 0 2px #000;
}

#dropzone .progress{
    background-color:#2586d0;
    position: absolute;
    height:100%;
    left:0;
    width:0;

    box-shadow: 0 0 1px rgba(255, 255, 255, 0.4) inset;

    -moz-transition:0.25s;
    -webkit-transition:0.25s;
    -o-transition:0.25s;
    transition:0.25s;
}

#dropzone .preview.done .progress{
    width:100% !important;
}

JavaScript

//http://tutorialzine.com/2011/09/html5-file-upload-jquery-php/
$(function(){

    var dropbox = $('#dropzone'),
        message = $('.message', dropbox);
    
    dropbox.filedrop({
        paramname:'pic',
        maxfiles:50, /* 5 at a time */
        maxfilesize: 2, /* in mb */
        url:'post.html',
        uploadFinished: function(i,file,response){
            $.data(file).addClass('done');
            // response is a JSON object that the URL should return
        },
        error: function(err,file){
            switch(err){
                case 'BrowserNotSupported':
                    showMessage('Your browser does not support HTML5 file uploads!');
                    break;
                case 'TooManyFiles':
                    alert('Too many files! Pleaase select 5 at the most!');
                    break;
                case 'FileTooLarge':
                    alert(file.name + ' is too large! Please upload files up to 2mb.');
                    break;
                default:
                    break;
            }
        },
        beforeEach: function(file){
            // Check file type (mime)
            if(!file.type.match(/^image\//)){
                alert('Only images are allowed!');
                
                // Return false will cause the file to be rejected
                return false;
            }
        },
        uploadStarted:function(i,file,len){
            createImage(file);
        },
        progressUpdated:function(i,file,progress){
            $.data(file).find('.progress').width(progress);
        }
    });


    var template = '<div class="preview">' +
                        '<span class="imageHolder">' +
                            '<img />' +
                            '<span class="uploaded"></span>' +
                        '</span>' +
                        '<div class="progressHolder">' +
                            '<div class="progress"></div>' +
                        '</div>' +
           ...