HTML5 Drag n Drop File Upload

Question

I'm running a website, where I'd like to upload files with Drag 'n Drop, using the HTML5 File API and FileReader. I have successfully managed to create a new FileReader, but I don't know how to upload the file. My code (JavaScript) is the following:

holder = document.getElementById('uploader');

holder.ondragover = function () {
    $("#uploader").addClass('dragover');
    return false;
};

holder.ondragend = function () {
    $("#uploader").removeClass('dragover');
    return false;
};

holder.ondrop = function (e) {
  $("#uploader").removeClass('dragover');
  e.preventDefault();

  var file = e.dataTransfer.files[0],
      reader = new FileReader();
  reader.onload = function (event) {
    //I shoud upload the file now...
  };
  reader.readAsDataURL(file);

  return false;
};

I also have a form (id : upload-form) and an input file field (id : upload-input). Do you have any ideas?

P.S. I use jQuery, that's why there is $("#uploader") and others.

Answer 1

Rather than code this from scratch, why not use something like html5uploader, which works via drag n drop (uses FileReader etc.): http://code.google.com/p/html5uploader/

EDIT: apparently we respondents are supposed to tend to our answers forever more, for fear for down-votes. The Google Code link is now dead (four years later), so here's a jQuery plugin that is very similar: http://www.igloolab.com/jquery-html5-uploader/

Answer 2

You'll want to extract the base64 encoded file contents and ajax them over tot the server.

JavaScript

var extractBase64Data;
extractBase64Data = function(dataUrl) {
  return dataUrl.substring(dataUrl.indexOf(',') + 1);
};

// Inside the ondrop event
Array.prototype.forEach.call(event.dataTransfer.files, function(file) {
  var reader;

  if (!file.type.match(options.matchType)) {
    return;
  }

  reader = new FileReader();

  reader.onload = function(event) {
    var contentsBase64;
    if (event.target.readyState === FileReader.DONE) {
      contentsBase64 = extractBase64Data(event.target.result);
      return $.post(someURL, {
        contentsBase64: contentsBase64
      });
    }
  };

  reader.readAsDataURL(file);
});

CoffeeScript

extractBase64Data = (dataUrl) ->
  dataUrl.substring(dataUrl.indexOf(',') + 1)


# Inside the ondrop event
Array::forEach.call event.dataTransfer.files, (file) ->
  return unless file.type.match(options.matchType)

  reader = new FileReader()

  reader.onload = (event) ->
    if event.target.readyState == FileReader.DONE
      contentsBase64 = extractBase64Data(event.target.result)
      $.post someURL,
        contentsBase64: contentsBase64

  reader.readAsDataURL(file)