DropzoneJs – drag-and-drop file uploads with image previews | Hacker News Reader

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

dropzonejs.com

119 pointsdhruvbhatia30 comments

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.

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.

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

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.

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.

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.

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

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?

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!

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.

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.

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

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?

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.

I'd also like to see that.

+1 for a Rails demo app

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.

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.

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

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.

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

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

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

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

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.

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.