Comments on: Drag and drop file uploading using JavaScript

By: Craig Morrison

Craig Morrison — Tue, 02 Mar 2010 22:31:16 +0000

@ninja

http://www.sillywindows.com/fm/

It requires a login to use..

Username: admin
Password: letmein

(Yeah, I know, not original but there’s really no sensitive data there.)

Its my live development version, so things may change as time progresses.

By: The Css Ninja

The Css Ninja — Tue, 02 Mar 2010 05:47:10 +0000

@Craig – Have you thought about setting it up on your hosting so people can see it online rather than downloading it?

By: Craig Morrison

Craig Morrison — Tue, 02 Mar 2010 04:52:14 +0000

Your article and a little reading at the Mozilla dev site helped me to come up with a fairly full featured file manager I use for image uploads. It can be grabbed from the link above.

Enjoy!

By: Twitted by IainDelaney

Twitted by IainDelaney — Sun, 10 Jan 2010 12:14:06 +0000

[...] This post was Twitted by IainDelaney [...]

By: Twitted by thek27

Twitted by thek27 — Wed, 09 Dec 2009 21:59:27 +0000

[...] This post was Twitted by thek27 [...]

By: The Css Ninja

The Css Ninja — Thu, 03 Dec 2009 23:38:40 +0000

Sounds like a cool idea, would be pretty intensive work for the client to process even with web workers.

By: Franz

Franz — Thu, 03 Dec 2009 10:55:07 +0000

“resizing by canvas techniques” means that you load the original image into a html5 canvas with the .fromDataUrl()-method, then scale the canvas down and dump out the scaled-down-version of your image as a JPEG with the .toDataUrl()-method.

you could then upload the scaled down version and save bandwith

By: The Css Ninja

The Css Ninja — Thu, 03 Dec 2009 09:31:24 +0000

The 1MB limit is purely arbitrary I put it in place so the demo couldn’t be abused with people trying to upload massive files.

I’m not exactly sure what you mean by resizing with canvas techniques?

In theory it should be able to handle any amount of images but the more images you drag in the more memory gets consumed. As it has to load the images into memory and process them.

Mozilla has however, after some review of the spec, updated how it works and I’ll be doing a follow up article on those updates soon. The changes made will be able to handle larger files more seamlessly.

By: Franz

Franz — Thu, 03 Dec 2009 09:09:31 +0000

Thanks for the exhaustive article… one question: you limit the maximum size for the processed files to 1 megabyte. Is this limit arbitrary or does firefox enforce this?

Many JPEGs from digital cameras are larger than 1 MB, so the uploader wouldn’t work for these.

Maybe you can update you example to show the resizing of these images with canvas techniques?

Have you tested the uploader performance when dragging many image files at once?

By: The Css Ninja

The Css Ninja — Mon, 23 Nov 2009 05:14:22 +0000

Thanks for the awesome follow up comment Fred! Good to know you found a solution, will be very useful for other readers.