

DropzoneJs – drag-and-drop file uploads with image previews - dhruvbhatia
http://www.dropzonejs.com/?r=hackernews

======
popotamonga
I would like to use this in a site where we print physical photos (all that
exist are in flash). As soon as i select 100 images ate the same time it
crashes all my browsers. (Eg: FireFox went up to 3Gb of used memory and then
crashed)

Try this:

Use Settimeout on a loop when generating the thumbnails so the browser is more
responsive when you upload dozens of large images.

Also the memory usage is way too large. The GC takes a while to kick in on all
the canvases. Have you tried reusing the canvases?

Also IE limits the memory you can use in canvas, when i upload multiple files
at the same time i get:

build.js, line 1191 character 9 SCRIPT14: Not enough storage is available to
complete this operation.

And only 5 thumbnails got generated.

I looked into this and there is not much you can do i think.

~~~
acdha
I've been meaning to compare with [https://github.com/cinely/mule-
uploader](https://github.com/cinely/mule-uploader) which seems to be more
focused on robustness.

------
JamesBaxter
They use this at Trovebox, I like it a lot.

It would be great if it could give you a list of failed uploads though, it
would make them easier to search and investigate.

~~~
jmathai
Correct, our beta uploader uses Dropzone. It'll replace the older plupload
version but we've got a few bugs to work out.

Failed upload and duplicate detection notifications in the UI as well as retry
are all planned.

------
mohs3n
Sweet project! Can't wait to use it on my next project. Love the fact that the
developer is a musician and a UI developer.

------
phelmig
DropzoneJS worked awesome for me. I use it as upload form for my Street Art
Mapping hobby project.

------
biot
I was hoping this would let me drop PDF, Word, PowerPoint, etc. files and it
would show me thumbnail previews of the contents (rather than just for
images). Anyone know of any libraries that implement this kind of
functionality? Maybe hacking OpenOffice?

~~~
marquis
The code is pretty easy to read - shouldn't be hard to add that functionality
yourself with the File API. We hacked it quite a bit for what we needed, it's
a nice script and the author is responsive for bugs. Thanks enyo!

~~~
biot
If you can supply pointers to an open source project which can take arbitrary
documents as input and generate thumbnail images from them, I just might
implement it myself.

------
ape4
Cool that you see a thumbnail of an image before its all uploaded. They say it
doesn't depend on jquery any more. I'd prefer it if they _did_ use jquery.

------
rgbrgb
Thanks! I'd like an example of uploading directly to S3.

~~~
toomuchtodo
How does DropzoneJS sign the CORS upload request to S3 without having a light
service running in EC2 to perform the signing request? You don't have to
include AWS credentials in your JS do you?

~~~
evan_
You could set the policy to expire on some far-future date, then sign it once
and forget it.

You'd essentially be giving world-write access to your bucket, of course. It
would be better to issue signed policies with enforced key names and the like.

------
exo_duz
This is a great tool. I've used it before and it's easy to implement. Quick
and solves a lot of the issues which I had for the project.

------
macinjosh
I have used this in many projects. It is really nice, clients love it and I
can make do it pretty much anything I need it to even CORs uploads.

------
esw
IE 10+. Damn. I still have some customers using IE7.

~~~
swalkergibson
I had to implement this last month for a client. I found this.

[https://developer.mozilla.org/en-
US/docs/Web/API/FileReader](https://developer.mozilla.org/en-
US/docs/Web/API/FileReader)

Linked in that article is this:

[https://mdn.mozillademos.org/files/3699/crossbrowser_image_p...](https://mdn.mozillademos.org/files/3699/crossbrowser_image_preview.html)

That takes care of most IE. I think it goes down to 7. I know it does 8 and 9
for sure.

------
pmx
I just implemented this tool yesterday - its awesome! took less than five mins
to go from zero to saving files on the server.

------
rohall
I've been using this library for months, I'm a fan. It's really easy to
implement, definitely recommend it.

------
fourstar
It's cool and I'll probably be using it, but please fix that documentation.
It's all over the place.

------
piratebroadcast
I'm new with Rails but want to try this out- SO this would be an alternative
to Paperclip?

~~~
senorprogrammer
Nope, this is a front-end interface for getting your files from the user to
the browser and then to your Rails app.

Paperclip and Carrierwave (I highly recommend Carrierwave) manage the actual
storage of the file data (ie on S3) and the incorporation of the file into
your ActiveRecord model (I'm glossing over a lot but hopefully you get the
idea).

Basically, Dropzone would be a companion to your Rails-based file storage
mechanism.

------
mbillie1
A link to a JS library that plugs the author's band... hmm... :)

------
baby
This was posted here months ago, is there something new?

------
the1
dragged drop about 100 images. killed it.

------
devanti
this is old, but it's great. my favorite one

