Upload via drag & drop

dragupload.js

var uploadImage = function(){
    $(".alert").remove();

    var img = $("#drop-target img").first();
    if(typeof(img) == "undefined" || typeof(img) == "null") {
      alertBox("Can't seem to find your image.");
      return false;
    }
    var formData = new FormData();
    formData.append("images[]", img.attr('src'));
    formData.append('format', 'base64');
    $.each(['x', 'y', 'w', 'h', 'filename'], function(i,v){ formData.append(v, img.data(v))});
    
    var xhr = new XMLHttpRequest();
    xhr.open('POST', "/resize.json");
    xhr.onload = function () {
      if(xhr.status == 200){
        window.location = xhr.responseText;
        $("#spinner").spin(false);
        $("#hammer-button").attr('disabled', null);
      }else{
        alertBox("Oops there was a problem.");
        $("#spinner").spin(false);
        $("#hammer-button").attr('disabled', null);
      }
      
    };
    $("#hammer-button").attr('disabled', 'disabled');
    $("#hammer-button").after("<span id='spinner'>&nbsp;</span>");
    $("#spinner").spin('medium');
    xhr.send(formData);
  }
  
  // this all uses html5 and XHR2, so jquery is kept 
  // to a minimum (it overrides most of the new apis)
  if(!Modernizr.draganddrop){
    console.log('no drag and drop support in browser');
    return false;
  }
  
  if( /Android|webOS|iPhone|iPad|iPod|BlackBerry/i.test(navigator.userAgent) ) {
    console.log('mobile device: can\'t drag photos in');
    return false;
  }
  
  $("#upload-form").hide();
  $("#oldfashioned").show();
  $("#oldfashioned").on("click", function(e){
    e.preventDefault();
    $("#upload-form").toggle();
    return false;
  });
  $("#drop-target").show();
  document.getElementById("drop-target").addEventListener("dragover", function(e){
    e.preventDefault();
    e.stopPropagation();
    e.dataTransfer.dropEffect = 'copy';
    $("#drop-target").addClass("dragged-over");
    return false;
  }, true);
  
  document.getElementById("drop-target").addEventListener("dragleave", function(e){
    e.preventDefault();
    e.stopPropagation();
    $("#drop-target").removeClass("dragged-over");
    return false;
  }, true);
  
  document.getElementById("drop-target").addEventListener("drop", function(evt){
    evt.preventDefault();
    $("#drop-target").removeClass("dragged-over");
    
    var files = evt.dataTransfer.files;
    var file = files[0];
    
    if(typeof(file) == "undefined"){
      console.log("no file found");
      alertBox("Sorry, couldn't read that file.")
      return false;
    }
    
    if (!file.type.match('image.*')) {
      console.log("not an image file");
      alertBox("Sorry, that doesn't look like an image.")
      return false;
    }
    
    var reader = new FileReader();
    reader.onload = (function(theFile) {
      return function(e) {
        var img = $("<img src='" + e.target.result +"' title='" + escape(theFile.name) +"' />")
        $("#drop-target").append(img);
        $("#drop-target img").Jcrop({aspectRatio: 1, onSelect: updateCoords, onChange: updateCoords});
        $("#drop-target img").first().data('filename', escape(theFile.name))
        $("#hammer-button").addClass("hammer-button");
        $("#hammer-button").css('display', 'inline-block');
        $("#hammer-button").on("click", uploadImage);
        $("#crop").show();
      };
    })(file);
    
    $("#drop-target h2").hide();
    
    reader.readAsDataURL(file);
    
  }, false);