Drag n from the file system to the web application

Question

I am studying a web / techno framework that allows you to drag n files from the file system to a web application. Of course, the goal is to upload these files to the application server.

In Flex, this seems impossible (although it works with AIR). I found a way with Google Gears, but this forces the user to install Gears as a browser plugin.

With the Java applet, this seems possible, but it requires the user to accept the security rule exception ... (this is strange for me, because reading the file specified by the user through DnD is not "less secure" than if the user specified the file through the standard classic dialog box Loading ...).

Is there any non-intrusive way to enable this function without installing any plugin and without accepting a security warning message?

Answer 1

Not.

Browsers usually do not support this built-in feature.

Answer 2

Firefox 3.6 and, apparently, the latest Safari (possibly Webkit night) support this via HTML5. I recently talked to him and it works very well. The example I did just inserts thumbnails into the page, but this can be configured to upload data to the 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 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> 

Answer 3

This is now possible thanks to the use of the HTML5 File API .

• Many ready-made solutions / examples:
  • http://www.freshdesignweb.com/jquery-html5-file-upload.html
• The library for this is quick and easy:
  • https://code.google.com/p/html5uploader/
• A more technical guide is available here:
  • http://www.sitepoint.com/html5-file-drag-and-drop/ ( demo )

It is even possible to drag and drop folders .