Drag & Drop Files Test

HTML

<div class="drop" data-target="1">
    Target 1
</div>
<div class="drop" data-target="2">
    Target 2
</div>
<div class="results-container">
    Drop files onto one of the two targets above. Results will be echoed below.
    <div class="results"></div>
    <div class="status"></div>
</div>

CSS

.drop,
.results-container {
    background-color: #CCC;
    padding: 20px;
    margin: 20px;
    border: solid 3px transparent;
}
.drop:hover {
    background-color: #AAA;
}
.doc-hover .drop {
    border: solid 3px grey;
}

.drop.item-hover {
    border: dashed 3px black;
}

JavaScript

function uploadFiles(url, files) {
  var formData = new FormData();
  
  for (var i = 0, file; file = files[i]; ++i) {
    formData.append(file.name, file);
    $('.results').append(file.name + ', ');
  }

  var xhr = new XMLHttpRequest();
  xhr.open('POST', url, true);
  xhr.upload.onprogress = updateProgress;
  xhr.onload = function(event) {
    var output;
    if (this.status == 200) {
      output = 'Upload complete';
    } else {
      output = "Upload failed: " + this.statusText;
    }
    $('.status').html('<br>'+output);
  };

  xhr.send(formData);  // multipart/form-data
}


function updateProgress(event){
    var done = event.position || event.loaded
      , total = event.totalSize || event.total
      , percentVal = (Math.floor(done/total*1000)/10) + '%';
    $('.status').html('<br>Uploading ' + percentVal);
}


function dropHandler(event){
    event.preventDefault();
    var $this = $(this)
      , $results = $('.results')
      , $status = $('.status')
      , project = $this.data('target')
      , files = event.originalEvent.dataTransfer.files
      , numFiles = files.length;
  $status.html('<br>Uploading');
  $results.html('<br><b>Target:</b> ' + project +'<br><b>Number of files: </b>' + numFiles + '<br><b>Files:</b> ');
    $this.removeClass('item-hover');
    $('body').removeClass('doc-hover');
    uploadFiles('/echo/json/',files);
}


$(document).ready(function(){
    
    $(document)
        .on('dragover',function(event){
            event.preventDefault();
            $('body').addClass('doc-hover');
        })
        .on('dragleave',function(event){
            $('body').removeClass('doc-hover');
        })
        .on('drop',function(event){
          event.preventDefault();
          $('body').removeClass('doc-hover');
        });
    $('.drop')
        .on('dragenter',function(event){
            event.preventDefault();
            $(this).addClass('item-hover');
        })
        .on('dragover',function(event){
           ...