DropzoneJs – drag-and-drop file uploads with image previews

http://www.dropzonejs.com/?r=hackernews

by dhruvbhatia • 13 years ago

119 30 13 years ago

pmx• 13 years ago

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

JamesBaxter• 13 years ago

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• 13 years ago

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.

phelmig• 13 years ago

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

popotamonga• 13 years ago

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.

thejosh• 13 years ago

Would love a way to easily upload hundreds of uploads that doesn't rely on clunky methods. Have the resort to FTP then processing off that which is a PITA.

acdha• 13 years ago

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

rohall• 13 years ago

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

exo_duz• 13 years ago

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.

the1• 13 years ago

dragged drop about 100 images. killed it.

mohs3n• 13 years ago

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.

piratebroadcast2• 13 years ago

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

aaronbrethorst• 13 years ago

1. I highly recommend trying out Carrierwave in place of Paperclip.

2. This replaces your file_fields. You'll still need something on the backend to deal with image storage and management, like Paperclip or Carrierwave.

senorprogrammer• 13 years ago

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.

macinjosh• 13 years ago

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.

ape4• 13 years ago

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• 13 years ago

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

toomuchtodo• 13 years ago

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_• 13 years ago

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.

eriktrautman• 13 years ago

I'd also like to see that.

piratebroadcast2• 13 years ago

+1 for a Rails demo app

fourstar• 13 years ago

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

esw• 13 years ago

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

swalkergibson• 13 years ago

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

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...

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

baby• 13 years ago

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

biot2• 13 years ago

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• 13 years ago

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!

biot2• 13 years ago

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.

mbillie1• 13 years ago

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

devanti• 13 years ago

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

DropzoneJs – drag-and-drop file uploads with image previews

Related Stories