9 ms·

Dropzone.js - JS library for drag-and-drop file uploads with image previews

206 points by professorplumb 14y ago

luney 14y ago
Just add the ability to paste an image from the clipboard (on supported browsers obviously) and its great!
- enyo 14y ago
  Do you mean a button, that, when clicked, uploads the image from clipboard? (https://github.com/enyo/dropzone/issues/38 https://github.com/enyo/dropzone/issues/38)
  - luney 14y ago
    Similar to gmail in chrome where you can press ctrl+v (cmd+v mac) to paste and if it is an image it uploads the image for you as if you just dragged a file. Another example that uses it is: http://mysticpaste.com http://mysticpaste.com Just get an image in your clipboard and paste in the box
JuDue 14y ago
Wish people would stop depending on jQuery. Old browsers can default to a normal form input.
- javascripter9 14y ago
  Why do you wish people would stop depending on jQ? I'm just curious.
  - jblock 14y ago
    For one, it's heavy compared to some very simple JS and a good portion of the time you don't need the entirety of the library. That said, it does abstract much of the crap that goes along with XMLHttpRequests and all the cross-browser idiosyncrasies that go along with it. I'd say at this point it's a matter of personal preference and performance requirements.
    - drgath 14y ago
      I think a combination of something like TinyXHR (https://gist.github.com/shimondoodkin/4706967 https://gist.github.com/shimondoodkin/4706967) and querySelectorAll would suffice for many simple use-cases on modern browsers.
  - emehrkay 14y ago
    Not everyone uses jQuery; I don't. This should be titled 'jQuery library...'
- enyo 14y ago
  You're not the first criticising this about my library. I used adapters in another lib of mine (http://www.opentip.org http://www.opentip.org) and it worked great, but the work involved in testing all browsers is not comparable to just using jQuery (especially when working with events). But it is definitely on my todo list (https://github.com/enyo/dropzone/issues/39 https://github.com/enyo/dropzone/issues/39). EDIT: PS: I also chose jQuery over any other lib just because it's the most wide spread. Personally I have worked with Ender, Component, RequireJS and don't use jQuery in all my projects.
heyrhett 14y ago
on iOS 6, iphone, I get a bug where it only shows me a fraction of the image I'm uploading in the preview. Does anyone know why this is? I had the same issue with jQuery-File-Upload.
- cmer 14y ago
  I assume you mean the black bar problem? It's a bug in iOS when you try to resize images client size. There's no workaround (besides disabling client-side image processing for iOS) AFAIK.
  - jewel 14y ago
    I've heard that https://github.com/stomita/ios-imagefile-megapixel https://github.com/stomita/ios-imagefile-megapixel works around the issue. I haven't had a chance to try it personally, yet.
    - cmer 14y ago
      Are you talking about this issue? https://direct.ilovefreegle.org/uploads/p17935j7131t5l2ql87a1oehkn3.jpg https://direct.ilovefreegle.org/uploads/p17935j7131t5l2ql87a... If so, great to know that there's a fix!
      - enyo 14y ago
        Yes that's the bug in question. There isn't really a fix for it, but a very very ugly workaround. Look at ios-imagefile-megapixel to see how they fixed it if you want. Or you can wait a few days for my implementation will be better documented.
- enyo 14y ago
  Hi, I'm the author of Dropzone. iOS has a bug (as already mentioned by other users) resizing images in canvas. There are workarounds, and I already started implementation (https://github.com/enyo/dropzone/commits/ios-squas https://github.com/enyo/dropzone/commits/ios-squas). Unfortunately ios-imagefile-megapixel doesn't meet my coding standards so I didn't want to just take the code of their implementation. I will release my fix soon.
lancefisher 14y ago
This is nice. Anyone know if it will work for direct uploads to S3?
- cmer 14y ago
  I've been playing with browser uploads for a few weeks now (including S3) and was too worried about the complexities of uploading to S3. I realized that there's nothing really fancy going on when uploading to S3. That's only true since Amazon added CORS support. Just add a few hidden form fields and you're good to go. Properly populating those fields can be a bit tricky, however. This gem will does a great job and should give you a head start: https://github.com/waynehoover/s3_direct_upload https://github.com/waynehoover/s3_direct_upload
  - smarx 14y ago
    You might want to take a look at our Webscript example for doing this: https://www.webscript.io/examples/s3upload https://www.webscript.io/examples/s3upload. (You can ignore the download part.) It should be trivial to use Dropzone.js instead of the normal <input> in the example HTML.
davekinkead 14y ago
Nice. After dragging a file to the drop board, I couldn't remove it (FF18 OSX10.7). It would be nice if I could drag off as loading the wrong file seems to require a page refresh to undo.
- enyo 14y ago
  I'm in the progress of developing hooks for removing (and programmatically adding) files. So this feature will be available soon. (https://github.com/enyo/dropzone/issues/36 https://github.com/enyo/dropzone/issues/36)
nachteilig 14y ago
Looks pretty nice. For what it's worth, it seems like a lot of the other players in this space have gotten popular by providing tutorials for usage with Rails, PHP, etc. Might be worth a few paragraphs.
- enyo 14y ago
  Thanks for the suggestion. I created an issue for it and will try to add it soon: https://github.com/enyo/dropzone/issues/37 https://github.com/enyo/dropzone/issues/37
juzfoo 14y ago
always struggle trying anything related to drag n drop on my ubuntu 12.10, because the moment i drag a file on nautilus the entire sets of apps get disabled on my unity sidebar except firefox and nautilus. and even firefox doesn't open so basically am stuck :(
- ZeroGravitas 14y ago
  You can use the window pinning (not sure of the right word) to quickly move a window to take half the screen by dragging it to either side. Then you can do the same with the the other window. Once done dragging to the top will fullscreen it again.
- enyo 14y ago
  Dropzone also supports click to upload, so you do not HAVE to drag'n'drop. It's just cooler if you can ;)
rajivtiru 14y ago
Thank god for this. So much easier to use this with Require JS instead of jQuery-File-Upload.
graue 14y ago
Anyone else finding that the demo is broken, particularly in Firefox on Linux? I filed an issue: https://github.com/enyo/dropzone/issues/34 https://github.com/enyo/dropzone/issues/34
koopajah 14y ago
Pretty neat library. Any plans to connect to filepicker.io? Would love to be able to drag a file in my webapp for it to upload to filepicker automatically and haven't got the time yet to do it myself!
nodesocket 14y ago
Nice. We use jquery-filedrop, which is really simple, but does the trick. https://github.com/weixiyen/jquery-filedrop https://github.com/weixiyen/jquery-filedrop
jwarren 14y ago
Nice, though it would be awesome if it could client-side resize images over a certain size, like Plupload does. Helps to manage people uploading 4000px wide images straight out of their camera.
pandeiro 14y ago
Quickly scanning the site and grepping the coffeescript source I didn't see any ajax support built in. That would make a nice option (if not the default).
BaconJuice 14y ago
This is perfect, thanks for sharing!

206 points by professorplumb 14y ago

luney 14y ago

Just add the ability to paste an image from the clipboard (on supported browsers obviously) and its great!

enyo 14y ago
Do you mean a button, that, when clicked, uploads the image from clipboard? (https://github.com/enyo/dropzone/issues/38 https://github.com/enyo/dropzone/issues/38)
- luney 14y ago
  Similar to gmail in chrome where you can press ctrl+v (cmd+v mac) to paste and if it is an image it uploads the image for you as if you just dragged a file. Another example that uses it is: http://mysticpaste.com http://mysticpaste.com Just get an image in your clipboard and paste in the box

JuDue 14y ago

Wish people would stop depending on jQuery. Old browsers can default to a normal form input.

javascripter9 14y ago
Why do you wish people would stop depending on jQ? I'm just curious.
- jblock 14y ago
  For one, it's heavy compared to some very simple JS and a good portion of the time you don't need the entirety of the library. That said, it does abstract much of the crap that goes along with XMLHttpRequests and all the cross-browser idiosyncrasies that go along with it. I'd say at this point it's a matter of personal preference and performance requirements.
  - drgath 14y ago
    I think a combination of something like TinyXHR (https://gist.github.com/shimondoodkin/4706967 https://gist.github.com/shimondoodkin/4706967) and querySelectorAll would suffice for many simple use-cases on modern browsers.
- emehrkay 14y ago
  Not everyone uses jQuery; I don't. This should be titled 'jQuery library...'
enyo 14y ago
You're not the first criticising this about my library. I used adapters in another lib of mine (http://www.opentip.org http://www.opentip.org) and it worked great, but the work involved in testing all browsers is not comparable to just using jQuery (especially when working with events). But it is definitely on my todo list (https://github.com/enyo/dropzone/issues/39 https://github.com/enyo/dropzone/issues/39). EDIT: PS: I also chose jQuery over any other lib just because it's the most wide spread. Personally I have worked with Ender, Component, RequireJS and don't use jQuery in all my projects.

heyrhett 14y ago

on iOS 6, iphone, I get a bug where it only shows me a fraction of the image I'm uploading in the preview. Does anyone know why this is? I had the same issue with jQuery-File-Upload.

cmer 14y ago
I assume you mean the black bar problem? It's a bug in iOS when you try to resize images client size. There's no workaround (besides disabling client-side image processing for iOS) AFAIK.
- jewel 14y ago
  I've heard that https://github.com/stomita/ios-imagefile-megapixel https://github.com/stomita/ios-imagefile-megapixel works around the issue. I haven't had a chance to try it personally, yet.
  - cmer 14y ago
    Are you talking about this issue? https://direct.ilovefreegle.org/uploads/p17935j7131t5l2ql87a1oehkn3.jpg https://direct.ilovefreegle.org/uploads/p17935j7131t5l2ql87a... If so, great to know that there's a fix!
    - enyo 14y ago
      Yes that's the bug in question. There isn't really a fix for it, but a very very ugly workaround. Look at ios-imagefile-megapixel to see how they fixed it if you want. Or you can wait a few days for my implementation will be better documented.
enyo 14y ago
Hi, I'm the author of Dropzone. iOS has a bug (as already mentioned by other users) resizing images in canvas. There are workarounds, and I already started implementation (https://github.com/enyo/dropzone/commits/ios-squas https://github.com/enyo/dropzone/commits/ios-squas). Unfortunately ios-imagefile-megapixel doesn't meet my coding standards so I didn't want to just take the code of their implementation. I will release my fix soon.

lancefisher 14y ago

This is nice. Anyone know if it will work for direct uploads to S3?

cmer 14y ago
I've been playing with browser uploads for a few weeks now (including S3) and was too worried about the complexities of uploading to S3. I realized that there's nothing really fancy going on when uploading to S3. That's only true since Amazon added CORS support. Just add a few hidden form fields and you're good to go. Properly populating those fields can be a bit tricky, however. This gem will does a great job and should give you a head start: https://github.com/waynehoover/s3_direct_upload https://github.com/waynehoover/s3_direct_upload
- smarx 14y ago
  You might want to take a look at our Webscript example for doing this: https://www.webscript.io/examples/s3upload https://www.webscript.io/examples/s3upload. (You can ignore the download part.) It should be trivial to use Dropzone.js instead of the normal <input> in the example HTML.

davekinkead 14y ago

Nice. After dragging a file to the drop board, I couldn't remove it (FF18 OSX10.7). It would be nice if I could drag off as loading the wrong file seems to require a page refresh to undo.

enyo 14y ago
I'm in the progress of developing hooks for removing (and programmatically adding) files. So this feature will be available soon. (https://github.com/enyo/dropzone/issues/36 https://github.com/enyo/dropzone/issues/36)

nachteilig 14y ago

Looks pretty nice. For what it's worth, it seems like a lot of the other players in this space have gotten popular by providing tutorials for usage with Rails, PHP, etc. Might be worth a few paragraphs.

enyo 14y ago
Thanks for the suggestion. I created an issue for it and will try to add it soon: https://github.com/enyo/dropzone/issues/37 https://github.com/enyo/dropzone/issues/37

juzfoo 14y ago

always struggle trying anything related to drag n drop on my ubuntu 12.10, because the moment i drag a file on nautilus the entire sets of apps get disabled on my unity sidebar except firefox and nautilus. and even firefox doesn't open so basically am stuck :(

ZeroGravitas 14y ago
You can use the window pinning (not sure of the right word) to quickly move a window to take half the screen by dragging it to either side. Then you can do the same with the the other window. Once done dragging to the top will fullscreen it again.
enyo 14y ago
Dropzone also supports click to upload, so you do not HAVE to drag'n'drop. It's just cooler if you can ;)

rajivtiru 14y ago

Thank god for this. So much easier to use this with Require JS instead of jQuery-File-Upload.

graue 14y ago

Anyone else finding that the demo is broken, particularly in Firefox on Linux? I filed an issue: https://github.com/enyo/dropzone/issues/34 https://github.com/enyo/dropzone/issues/34

koopajah 14y ago

Pretty neat library. Any plans to connect to filepicker.io? Would love to be able to drag a file in my webapp for it to upload to filepicker automatically and haven't got the time yet to do it myself!

nodesocket 14y ago

Nice. We use jquery-filedrop, which is really simple, but does the trick. https://github.com/weixiyen/jquery-filedrop https://github.com/weixiyen/jquery-filedrop

jwarren 14y ago

Nice, though it would be awesome if it could client-side resize images over a certain size, like Plupload does. Helps to manage people uploading 4000px wide images straight out of their camera.

pandeiro 14y ago

Quickly scanning the site and grepping the coffeescript source I didn't see any ajax support built in. That would make a nice option (if not the default).

BaconJuice 14y ago

This is perfect, thanks for sharing!