Comments on: Drag and drop file uploading using JavaScript

By: NakajiJapan » FileApi + DragAndDrop + JQueryでドロップした画像ファイルを画面に描画する

NakajiJapan » FileApi + DragAndDrop + JQueryでドロップした画像ファイルを画面に描画する — Sun, 05 Sep 2010 12:33:17 +0000

[...] Drag and drop file uploading using JavaScript ※コード汚かったけど結構参考になりました。ここだとSVGとかXHRとかもつかってアプロード中の処理もやってるからすごい。 [...]

By: Gesucht: php-Script für Funktion "Neue Seite" - Seite 2 - php.de

Gesucht: php-Script für Funktion "Neue Seite" - Seite 2 - php.de — Fri, 30 Jul 2010 17:35:22 +0000

[...] in Websites, in die der Text einfach reingeschrieben oder -kopiert wird (siehe QuickChange) – der Bildwechsel per drag&drop ist ja auch nicht mehr weit. Und wenn wir neue Seiten brauchen, dann gehen wir ins FTP und kopieren sie manuell, und nebenher [...]

By: The Css Ninja

The Css Ninja — Wed, 28 Jul 2010 23:25:00 +0000

@Philip S – If you’re talking about the size limit on my demo it’s just an if statement checking the size, you can remove that and the user can upload any sized file. Only issue is that, like you mentioned, it will load all of them into memory. Good news about that is the File API spec editors are aware of this and have added the url attribute which creates a random string that links back to the file rather than loading it into memory. The Bad news is it’s only currently in Firefox 4.

By: Philip Snyder

Philip Snyder — Wed, 28 Jul 2010 19:32:29 +0000

Hi! Nice work here. I’ve been working on something very similar for our site. Have it working in FF and WebKit browsers. Unfortunately, the file size issue is a major show stopper. How do you tell your users “use this to upload your files — unless they’re bigger than this size”? There has to be some other way to do this than reading all the files into memory… anyone?

By: Jmactacular

Jmactacular — Wed, 28 Jul 2010 18:23:21 +0000

This is amazing!!!!!!!! Thank you so much. Exactly what I was looking for. I got it rocking with C#. I was also seeing the lost reference to event.target.log and the progress bar stops updating, but I found by just adding a guard around it of “if (event.target.log)” it can recover okay and finish the progress bar as it uploads fine. Seems to work for me so far! Will try some more testing to make sure it’s solid. Also added a couple other similar guards around “currentImageItem.className”

By: The Css Ninja

The Css Ninja — Mon, 05 Jul 2010 03:05:24 +0000

@Thomas – You could create a button which fires the upload function and remove it from the drop event so only when the user clicks the button will the images be uploaded.

By: Thomas

Thomas — Tue, 15 Jun 2010 12:25:20 +0000

Is it possible to simply attach the file to the form and send it only when the user clicks the submit button?

By: Stanislas Duprey

Stanislas Duprey — Fri, 30 Apr 2010 22:28:21 +0000

That’s great! It really helped me. I have worked on a mootools plugin that degrades nicely on the other browsers (except IE6 and IE7)

see: http://html5stars.com/?p=62

By: modern file upload, gmail style! | HTML 5 stars

modern file upload, gmail style! | HTML 5 stars — Fri, 30 Apr 2010 22:09:33 +0000

[...] into a drag-and-drop file upload component. The main articles that helped me for this part are: – http://www.thecssninja.com/javascript/drag-and-drop-upload – [...]

By: qwazix

qwazix — Thu, 15 Apr 2010 14:08:36 +0000

I have used this and other fine examples on the subject to create an open source project which aims to be a complete solution for drag and drop uploading. Visit http://dragdropupload.sourceforge.net