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.

Ben · Accepted Answer · 2015-09-18 17:08:07Z

4

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/

edited Sep 18, 2015 at 17:08

answered Jun 28, 2011 at 21:23

Ben

7,59533 silver badges46 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

John Carter Over a year ago

BTW, that doesn't seem to be a Google project.

Amicable Over a year ago

The link you posted is dead

Ben Over a year ago

The post is over four years old. Feel free to use Google.

Daniel X Moore · Accepted Answer · 2011-06-29 07:25:40Z

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)

Collectives™ on Stack Overflow

HTML5 Drag n Drop File Upload

2 Answers 2

3 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related