Drag n drop from filesystem into a web application

Question

Hi,

I am investigating on a web framework/techno that allows to drag n drop files from the filesystem into a web application. The purpose is of course to upload those files into an application server.

In Flex it seems to be not possible (although it works with AIR). I have found a way with Google Gears, but this force the user to install Gears as a browser plugin.

With an Java applet, it seems to be possible but it requires the user to accept a security rule exception... (it is strange for me since reading a file specified by the user via DnD is not "less secure" than if the user had specified the file via standard classical Upload dialog box...).

Is there any non intrusive way to allow this feature, without installing any plugin and without accepting a security warning message box?

Answer 1

No.

Browsers don't generally have support for this sort of thing built in.

Answer 2

Firefox 3.6 and apparently the latest Safari (maybe Webkit nightly) support this through HTML5. I've been playing around with it recently and it works pretty well. The example I made just inserts thumbnails into the page, but this could be adjusted to upload the data to a server. Here is the JavaScript/jquery code I wrote, feel free to use this:

function debug(string) {
  $("#debugArea").append(string);
}

$(function() {
  // We need to override the dragover event, otherwise Firefox will just open the file on drop
  $("#dropArea").bind("dragover", function(event) {
    event.preventDefault();
  });

  // This is where the actual magic happens :)
  $("#dropArea").bind("drop", function(event) {
    event.preventDefault();
    debug("Dropped something: ");
    // Since jquery returns its own event object, we need to get the original one in order to access the files
    var files = event.originalEvent.dataTransfer.files;
    // jquery nicely loops for us over the files
    $(files).each(function(index, file) {
     if(!file.type.match(/image.*/)) { // Skip non-images
        debug(file.name)
        debug(" <em>not an image, skipping</em>; ");
        return;
      }

      // We need a new filereader for every file, otherwise the reading might be canceled by the next file
      var filereader = new FileReader();
      filereader.onloadend = function(event) { $("#thumbnails").append("<img src='"+event.target.result+"' width='100px' />"); };
      debug(file.name);
      debug("; ");

      // Read the file in data URL format so that we can easily add it to an img tag.
      filereader.readAsDataURL(file);
    });
    debug("<br/><br/>");
  })

});

And the HTML for it:

<div id="dropArea">
  <p>Drop images here!</p>
</div>
<div id="thumbnails">
</div>
<div id="debugArea">
  <strong>Debug Info:</strong><br/>
</div>