Drag-n-drop file upload

This article is a bit old now, see GIT repo and feel free to fork it

As a continuation of previous article about new issues in html5, I found a demo where file upload is already working with usual drag and drop on to the browser Firefox 3.6. Mostly its all draft and hacks right now. If you look at the code, you can see browser-specific params like

event.dataTransfer.files
event.dataTransfer.mozTypesAt(0)
event.dataTransfer.files[0].getAsBinary()

A file is send with similar ajax method sendAsBinary (). Since there are no confirmation, it may be a bit dangerous because user can accidentally send entire C: Windows directory. So it still needs all kinds of filters and validations as to what specifically can be uploaded and how deep.

Jquery dnd-upload

I wrote two jquery-plugins - one to support Firefox 3.6 (Namoroka) HTML5 upload, and one to support Google gears. You can use both together..

The easiest option for gears:

$('#drop_area').uploadg({gate:'http://somesite.com/upload_here_path/'});

Note that the key received from the server the file is "file" (in PHP its $ _FILES [ "file"] respectively ). And here is an extended example of code initialization..

var dragndropConfig={
	 beforeLoad:function(){
		 this.gate=some_dynamic_file_upload_url+'?parentID='+SomeOtherDynamicObject.ID;
		
		 if(SomeDisableReason){
			this.can_proceed=false;
		 }
	 },
	 onProgress:function(event) {
		 if (event.lengthComputable) {
			 var percentage = Math.round((event.loaded * 100) / event.total);
			 if (percentage < 100) {
				$('#some_progress_div').html('Uploading file..'+percentage+'%');
			 }
		 }
	 },

	onComplete:function(event,txt) { 
		$('#some_progress_div').html('done');
	}
};

if (window.google && google.gears){
	$('#drop_area').uploadg(dragndropConfig);
}

else{

 $('#drop_area').upload5(dragndropConfig);

}
 

Attention, Google gears still has bugs associated with such loading and has apparently halted development state because of upcoming html5 features. Also Chromium doesn't seem to support event.dataTransfer.files listing and although it has items() method, object inside is of blob type and cannot be converted to binary/string...

See also plupload

Btw. You can use this plugin under the same terms as jQuery is distributed
comments powered by Disqus
  • Priya
    avatar
    Will this functionality work with all browsers or only in FF?
  • Only versions that support HTML5
  • manisha
    avatar
    can you send me the proper coading for this demo which you have mentioned because for me jquery and ajax is new.
  • Gh61
    avatar
    Sorry, where is code to upload via google gears.
    $.uploadg=function(input, opt) is missing. :( PLS I need this
  • Gears is no longer supported by Google.. but here you go
    http://kurapov.name/res/file/162.js
  • Gh61
    avatar
    Thank you for quick answer, but i have one more question. Where i can get from "onProgress:function(event)" form event fileName of uploaded file?
  • Not sure what you mean. Example above in the article shows how to define these handlers, but what is the format of parameter may vary. Try using firebug with console.log() to see whats returned
  • Gh61
    avatar
    I need some way to get Name of uploaded file. Is it possible?
  • KATHLEENMAY
    avatar
    Don't you recognize that it's high time to get the home loans, which can realize your dreams.
  • Travis
    Works fine for me in Firefox and Safari. Recently under Chrome however I have been getting the following error: "Uncaught TypeError: Not enough arguments" on line 65. Any suggestions as to how this can be fixed? Thanks for the great script!
  • See updated version in github https://github.com/tot-ra/upload5
  • Thomas Vanhoutte
    avatar
    Thanks for the link :)