
Dropzone.js - JS library for drag-and-drop file uploads with image previews - professorplumb
http://www.dropzonejs.com/
======
nodesocket
Nice. We use jquery-filedrop, which is really simple, but does the trick.

<https://github.com/weixiyen/jquery-filedrop>

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

~~~
enyo
Do you mean a button, that, when clicked, uploads the image from clipboard?
(<https://github.com/enyo/dropzone/issues/38>)

~~~
luney
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>

Just get an image in your clipboard and paste in the box

------
nachteilig
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
Thanks for the suggestion. I created an issue for it and will try to add it
soon: <https://github.com/enyo/dropzone/issues/37>

------
davekinkead
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
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>)

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

------
koopajah
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!

------
JuDue
Wish people would stop depending on jQuery.

Old browsers can default to a normal form input.

~~~
javascripter9
Why do you wish people would stop depending on jQ? I'm just curious.

~~~
jblock
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
I think a combination of something like TinyXHR
(<https://gist.github.com/shimondoodkin/4706967>) and querySelectorAll would
suffice for many simple use-cases on modern browsers.

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

------
heyrhett
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
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
I've heard that <https://github.com/stomita/ios-imagefile-megapixel> works
around the issue. I haven't had a chance to try it personally, yet.

~~~
cmer
Are you talking about this issue?
[https://direct.ilovefreegle.org/uploads/p17935j7131t5l2ql87a...](https://direct.ilovefreegle.org/uploads/p17935j7131t5l2ql87a1oehkn3.jpg)

If so, great to know that there's a fix!

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

------
pandeiro
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
This is perfect, thanks for sharing!

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

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

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

~~~
cmer
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>

~~~
smarx
You might want to take a look at our Webscript example for doing this:
<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.

