11 ms·

Awesome jQuery File Upload

388 points by denysonique 15y ago

blakeperdue 15y ago
Anyone know what browsers this works in? Does it degrade gracefully in older browsers?
- manveru 15y ago
  That's covered here: https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-s...
azolotov 15y ago
I've been waiting for something like this, good job!
jsavimbi 15y ago
This is really nice. Well done!
vijayrawatsan 15y ago
Sweet... Really awesome...
kushsolitary 15y ago
Very nice. I will surely use it in my projects! Thanks for this amazing plugin! :D Cheers!
PedroCandeias 15y ago
Great job! Also, thanks for the pointer to Glyphicons. I'd been looking for just that sort of icon set.
kmfrk 15y ago
444 issues?! That's a new record. Nevertheless, this is the sleekest approach to file upload I've seen.
- chrisbroadfoot 15y ago
  Unfortunately, from the sample that I chose, none of them were actually bug reports.
- dikbrouwer 15y ago
  Ha, almost. I just checked Homebrew this morning and it has 445 outstanding issues.
deepkut 15y ago
Wow! My only feedback is to explain the 'check all' checkbox. It seems to be floating now, without any explanation. Aside from that minor issue, this is fantastic. Thanks for sharing this.
h2s 15y ago
We've been using this at work. It's very, very slick. Even things like cross-domain uploads using Iframe transport are handled quite transparently. Massive time saver and quite well documented as well.
meanguy 15y ago
Yet another nice stab at the problem. But every time I look through a component like this, it simply does not work. The corner cases kill you with end user complaints. No fault of the engineer: THIS NEEDS TO GET BUILT INTO THE DAMN BROWSER. Yes. Upload. With an actual progress bar. Built into the app you sit in all day. Imagine that. Sending messages to a PHP server script so you can have the server tell you how many bytes were sent? Even the dumbest terminals knew how to show a bytes uploaded count with XMODEM in 1977. Google Music installs a friggin client app to hash and upload your songs. DropBox still can't get drag and drop working and STILL limits files to 150MB if you upload via HTTP. This is such a basic scenario I simply don't understand why it hasn't been solved. And don't even get me started on the Upload Straight to Amazon S3 via Flash/Silverlight doodads. Nobody can seem to get those working reliably either.
- pfraze 15y ago
  How hard would it be to use the FTP protocol for uploads? A couple of browsers have support native... I'll look into that. Edit: yeah, could probably be done with a java applet, possibly hidden. Not sure if it would get all the benefits you're looking for, but I do know the FTP protocol gives upload progress (at least).
  - rhizome 15y ago
    For commodity uploading, FTP has firewall problems for too many people. Uploads need to be on port 80.
  - baq 15y ago
    ftp is often blocked in corporate environments.
- mwsherman 15y ago
  Agree. This is a beautiful implementation, given the state of browsers, but “moving files from one computer to another” seems like it was a solved problem a long time ago. (See also, editing rich text.)
  - 15y ago
apinstein 15y ago
We have been using this in production for well over a year. About 300,000 files have been uploaded via this system. It is quite robust and reliable. The only notable bugs are that drag n drop doesn't work on IE and that Safari/Win has a bug with multi-select. Neither are bugs with the uploader but rather browser limitations. I highly recommend it. We made it our default uploader, replacing both a java applet and Yui uploader. the drag and drop is awesome, as are the hooks for custom ui, pre-flighting, and error handling. Alan
- ClifReeder 15y ago
  I've also been using this on production for about eight months with no issues. Mutli-file upload works great too. Best part is all the callbacks options that are available: https://github.com/blueimp/jQuery-File-Upload/wiki/Options https://github.com/blueimp/jQuery-File-Upload/wiki/Options
- stoodder 15y ago
  I worked with this as well and supporting IE7 can be very tricky. While it works really well for successful file uploads, if you're anticipating to return any type of error response (ex: 400, "invalid file type") then you'll need to add some workarounds to your server code and the iframe-transport file that comes with this. Primarily you'll need the following two adjustments: * Your response must be at least 512 characters (we added white space padding to our JSON response). This is because IE overrides any 400-500 response with its friendly error messages unless you provide at least 512 characters of data. If you don't do this you'll get a cross site scripting error (because you'd be trying to read in the friendly error page, which is not on your domain) * You'll need to add the response code in your response text because there's no way (please correct me if I'm wrong) to read the http status of a loaded page's headers in an iframe. You'll then need to modify the iframe-transport to read in the status code from your response text and make the appropriate ajax calls in jQuery. This is obviously quite a bit hacky (and took me forever to figure out). Let me know if anyone else has any insight into this. I'll probably write this up in more detail in a blog post to come.
- jackds 15y ago
  Alan, just curious...how do you store your files once uploaded?
deleted 15y ago
[deleted]
jaimzob 15y ago
Nice! Like everyone else, I had a stab at the same problem. Not nearly as slick but might be interesting: http://www.thebitflow.com/journal.php#photo_upload http://www.thebitflow.com/journal.php#photo_upload (github: https://github.com/jaimz/file_upload https://github.com/jaimz/file_upload)
- ashconnor 15y ago
  I'm a big fan of Plupload - http://www.plupload.com/ http://www.plupload.com/
ing33k 15y ago
This is awesome..I have been using this since 1 year..and my users love this.
EricR23 15y ago
This is wonderful. I love the feel of interface.
jscheel 15y ago
I moved to this project after a horrible experience trying to mash together two different projects (one for drag and drop, and one for opening a file dialog on any button click). I was able to replace weeks of frustration in about 45 minutes, and haven't looked back since. I highly recommend it.
atomical 15y ago
I actually found this uploader quite hard to implement with the dependencies and templates. While it works great as is, customizing it was so painful that I tore it out of my project.
- gardentheory 15y ago
  Did you try using the Basic plugin? Worked for me with little customization. I almost didn't use the plugin until I found out I didn't need bootstrap and an entire user interface.
  - atomical 15y ago
    I had some advanced requirements and couldn't just throw it into my app in its most basic form. All the requirements for javascript includes blew my mind. I agree with another poster that something like this should be built into the browser.
abcd_f 15y ago
This needs an awesome progress bar - http://swapped.cc/uploader http://swapped.cc/uploader - saw this on reddit few weeks ago
dutchbrit 15y ago
Valums Ajax Upload is also pretty nifty. http://valums.com/ajax-upload/ http://valums.com/ajax-upload/
felixchan 15y ago
How does this compare to Plupload? (the industry standard)
- BryanB55 15y ago
  I'm wondering the same thing... Has anyone also used Plupload? I can't really find anything to say this would be better but I haven't used it yet. (http://plupload.com http://plupload.com)
  - gautaml 15y ago
    I've used plupload on a site I made and it is actually a rather nice library to work with. You can see it here: http://dropsauce.com/ http://dropsauce.com/ I'm actually working on a new site which requires uploads (by clients) and am wondering if I should stick with Plupload or consider trying this.
- fellars 15y ago
  For one, the license. jquery File Upload is MIT and Plupload is GPL v3 (they provide a paid commercial license). I've only used this one (jquery file upload) and it has been great to work with.
PStamatiou 15y ago
We've been using a version of this for Picplum since about October I want to say. We used something else before but didn't quite like the code. This has been solid for us. Take a look at how we designed our uploader: https://www.picplum.com https://www.picplum.com edit: forgot we made a screencast last month http://blog.picplum.com/how-to-send-photo-prints-60-seconds/ http://blog.picplum.com/how-to-send-photo-prints-60-seconds/
trustfundbaby 15y ago
I implemented this in two Rails apps over the last 8 months and its pretty great. On the first we used it to replace a flash based solution that was causing problems with the Flash 10 release. I had to hack the plugin to handle a case that it wasn't specifically designed to handle in the first one (probably just due to my unfamiliarity with the plugin at that point) and in the second one I had to add all sorts of advanced functionality to an older version of the plugin (v4), which we had used in building the app, initially. My advice is to make sure to start small (single file upload) and build up, instead of just trying to port your solution over, you might also run into issues with Firefox 3 and all of IE if you go too custom, so keep that in mind. It really is a great piece of software, detailed version specific documentation and FAQs, and the author blueimp is most helpful and quick in responding to issues on github. I remember a thread with him that went on for days, delving into specific lines of code and why they were written that way and at every point I kept thinking "Okay, he's either going to cuss me out or stop responding at this point" but he just kept helping out. Truly exemplary attitude, I can only hope to have half that much patience.
TheBoff 15y ago
I'm amazed that file upload wasn't fixed with HTML5: we shouldn't need piles of elaborate hacks to provide attractive, functional uploads, especially when it's such a vital part of most web applications. I ended up taking the brutally simple approach of "upload a zip file" to one client, which worked at least!
headbiznatch 15y ago
Been using this in production for about 6 months and it is the Cadillac. Pretty good documentation, too.
gdsf34dfsg 15y ago
Hmm, this doesn't seem to upload direct to S3?

388 points by denysonique 15y ago

blakeperdue 15y ago

Anyone know what browsers this works in? Does it degrade gracefully in older browsers?

manveru 15y ago
That's covered here: https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-support https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-s...

azolotov 15y ago

I've been waiting for something like this, good job!

jsavimbi 15y ago

This is really nice. Well done!

vijayrawatsan 15y ago

Sweet... Really awesome...

kushsolitary 15y ago

Very nice. I will surely use it in my projects! Thanks for this amazing plugin! :D Cheers!

PedroCandeias 15y ago

Great job! Also, thanks for the pointer to Glyphicons. I'd been looking for just that sort of icon set.

kmfrk 15y ago

444 issues?! That's a new record. Nevertheless, this is the sleekest approach to file upload I've seen.

chrisbroadfoot 15y ago
Unfortunately, from the sample that I chose, none of them were actually bug reports.
dikbrouwer 15y ago
Ha, almost. I just checked Homebrew this morning and it has 445 outstanding issues.

deepkut 15y ago

Wow! My only feedback is to explain the 'check all' checkbox. It seems to be floating now, without any explanation. Aside from that minor issue, this is fantastic. Thanks for sharing this.

h2s 15y ago

We've been using this at work. It's very, very slick. Even things like cross-domain uploads using Iframe transport are handled quite transparently. Massive time saver and quite well documented as well.

meanguy 15y ago

Yet another nice stab at the problem. But every time I look through a component like this, it simply does not work. The corner cases kill you with end user complaints. No fault of the engineer: THIS NEEDS TO GET BUILT INTO THE DAMN BROWSER. Yes. Upload. With an actual progress bar. Built into the app you sit in all day. Imagine that. Sending messages to a PHP server script so you can have the server tell you how many bytes were sent? Even the dumbest terminals knew how to show a bytes uploaded count with XMODEM in 1977. Google Music installs a friggin client app to hash and upload your songs. DropBox still can't get drag and drop working and STILL limits files to 150MB if you upload via HTTP. This is such a basic scenario I simply don't understand why it hasn't been solved. And don't even get me started on the Upload Straight to Amazon S3 via Flash/Silverlight doodads. Nobody can seem to get those working reliably either.

pfraze 15y ago
How hard would it be to use the FTP protocol for uploads? A couple of browsers have support native... I'll look into that. Edit: yeah, could probably be done with a java applet, possibly hidden. Not sure if it would get all the benefits you're looking for, but I do know the FTP protocol gives upload progress (at least).
- rhizome 15y ago
  For commodity uploading, FTP has firewall problems for too many people. Uploads need to be on port 80.
- baq 15y ago
  ftp is often blocked in corporate environments.
mwsherman 15y ago
Agree. This is a beautiful implementation, given the state of browsers, but “moving files from one computer to another” seems like it was a solved problem a long time ago. (See also, editing rich text.)
- 15y ago

apinstein 15y ago

We have been using this in production for well over a year. About 300,000 files have been uploaded via this system. It is quite robust and reliable. The only notable bugs are that drag n drop doesn't work on IE and that Safari/Win has a bug with multi-select. Neither are bugs with the uploader but rather browser limitations. I highly recommend it. We made it our default uploader, replacing both a java applet and Yui uploader. the drag and drop is awesome, as are the hooks for custom ui, pre-flighting, and error handling. Alan

ClifReeder 15y ago
I've also been using this on production for about eight months with no issues. Mutli-file upload works great too. Best part is all the callbacks options that are available: https://github.com/blueimp/jQuery-File-Upload/wiki/Options https://github.com/blueimp/jQuery-File-Upload/wiki/Options
stoodder 15y ago
I worked with this as well and supporting IE7 can be very tricky. While it works really well for successful file uploads, if you're anticipating to return any type of error response (ex: 400, "invalid file type") then you'll need to add some workarounds to your server code and the iframe-transport file that comes with this. Primarily you'll need the following two adjustments: * Your response must be at least 512 characters (we added white space padding to our JSON response). This is because IE overrides any 400-500 response with its friendly error messages unless you provide at least 512 characters of data. If you don't do this you'll get a cross site scripting error (because you'd be trying to read in the friendly error page, which is not on your domain) * You'll need to add the response code in your response text because there's no way (please correct me if I'm wrong) to read the http status of a loaded page's headers in an iframe. You'll then need to modify the iframe-transport to read in the status code from your response text and make the appropriate ajax calls in jQuery. This is obviously quite a bit hacky (and took me forever to figure out). Let me know if anyone else has any insight into this. I'll probably write this up in more detail in a blog post to come.
jackds 15y ago
Alan, just curious...how do you store your files once uploaded?

deleted 15y ago

[deleted]

jaimzob 15y ago

Nice! Like everyone else, I had a stab at the same problem. Not nearly as slick but might be interesting: http://www.thebitflow.com/journal.php#photo_upload http://www.thebitflow.com/journal.php#photo_upload (github: https://github.com/jaimz/file_upload https://github.com/jaimz/file_upload)

ashconnor 15y ago
I'm a big fan of Plupload - http://www.plupload.com/ http://www.plupload.com/

ing33k 15y ago

This is awesome..I have been using this since 1 year..and my users love this.

EricR23 15y ago

This is wonderful. I love the feel of interface.

jscheel 15y ago

I moved to this project after a horrible experience trying to mash together two different projects (one for drag and drop, and one for opening a file dialog on any button click). I was able to replace weeks of frustration in about 45 minutes, and haven't looked back since. I highly recommend it.

atomical 15y ago

I actually found this uploader quite hard to implement with the dependencies and templates. While it works great as is, customizing it was so painful that I tore it out of my project.

gardentheory 15y ago
Did you try using the Basic plugin? Worked for me with little customization. I almost didn't use the plugin until I found out I didn't need bootstrap and an entire user interface.
- atomical 15y ago
  I had some advanced requirements and couldn't just throw it into my app in its most basic form. All the requirements for javascript includes blew my mind. I agree with another poster that something like this should be built into the browser.

abcd_f 15y ago

This needs an awesome progress bar - http://swapped.cc/uploader http://swapped.cc/uploader - saw this on reddit few weeks ago

dutchbrit 15y ago

Valums Ajax Upload is also pretty nifty. http://valums.com/ajax-upload/ http://valums.com/ajax-upload/

felixchan 15y ago

How does this compare to Plupload? (the industry standard)

BryanB55 15y ago
I'm wondering the same thing... Has anyone also used Plupload? I can't really find anything to say this would be better but I haven't used it yet. (http://plupload.com http://plupload.com)
- gautaml 15y ago
  I've used plupload on a site I made and it is actually a rather nice library to work with. You can see it here: http://dropsauce.com/ http://dropsauce.com/ I'm actually working on a new site which requires uploads (by clients) and am wondering if I should stick with Plupload or consider trying this.
fellars 15y ago
For one, the license. jquery File Upload is MIT and Plupload is GPL v3 (they provide a paid commercial license). I've only used this one (jquery file upload) and it has been great to work with.

PStamatiou 15y ago

We've been using a version of this for Picplum since about October I want to say. We used something else before but didn't quite like the code. This has been solid for us. Take a look at how we designed our uploader: https://www.picplum.com https://www.picplum.com edit: forgot we made a screencast last month http://blog.picplum.com/how-to-send-photo-prints-60-seconds/ http://blog.picplum.com/how-to-send-photo-prints-60-seconds/

trustfundbaby 15y ago

I implemented this in two Rails apps over the last 8 months and its pretty great. On the first we used it to replace a flash based solution that was causing problems with the Flash 10 release. I had to hack the plugin to handle a case that it wasn't specifically designed to handle in the first one (probably just due to my unfamiliarity with the plugin at that point) and in the second one I had to add all sorts of advanced functionality to an older version of the plugin (v4), which we had used in building the app, initially. My advice is to make sure to start small (single file upload) and build up, instead of just trying to port your solution over, you might also run into issues with Firefox 3 and all of IE if you go too custom, so keep that in mind. It really is a great piece of software, detailed version specific documentation and FAQs, and the author blueimp is most helpful and quick in responding to issues on github. I remember a thread with him that went on for days, delving into specific lines of code and why they were written that way and at every point I kept thinking "Okay, he's either going to cuss me out or stop responding at this point" but he just kept helping out. Truly exemplary attitude, I can only hope to have half that much patience.

TheBoff 15y ago

I'm amazed that file upload wasn't fixed with HTML5: we shouldn't need piles of elaborate hacks to provide attractive, functional uploads, especially when it's such a vital part of most web applications. I ended up taking the brutally simple approach of "upload a zip file" to one client, which worked at least!

headbiznatch 15y ago

Been using this in production for about 6 months and it is the Cadillac. Pretty good documentation, too.

gdsf34dfsg 15y ago

Hmm, this doesn't seem to upload direct to S3?