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.

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

We have > 4GB uploads to S3 working reliably (original video files for encoding are quite large so long uploads are not an edge case for us). You can multi-select files, and the user sees upload progress percentages on all of them. We're using Silverlight (with less reliable Flash and HTML5 fallbacks).

My thoughts exactly. Worse, it's not the only problem like this, even though it's probably the most common and annoying one, and the one that's not solved well by various workarounds. (Date picking is a close second. And yes, I'm aware of the corresponding HTML5 input type. It's still not supported in any major browsers.)

I don't understand why this isn't solved, but even more so I don't understand why most people seem to be perfectly happy with the current state of things. In fact, I get the impressions most web developers like this. They like writing scripts to solve trivial problems or finding obscure scripts that do it for them. Makes them feel helpful and important, or something. Me? Makes me angry. This should have been conclusively solved a decade ago.

I'm seriously considering writing my own toy browser. Not that someone will use it, but at least I will be able to tell for sure how difficult is it to solve all these trivial problems.

Please do. One of the goals of writing the contemporary HTML spec was to make it easier to make a Web browser by actually defining all the difficult things that browsers have to do. (It used to be really hard to make a browser because literally half the work was reverse-engineering other browsers.)

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

> (See also, editing rich text.)

I've spent months on this problem. The challenge is that the behavior you want (text ranges) does not map well onto the DOM (trees). This takes some thought but isn't THAT bad. Browser bugs also play a role since the code paths aren't used that often but the main reason is the w3c Range API is the worst API I am aware of in any language and everything you could use to replace it is not cross browser.

> Sending messages to a PHP server script so you can have the server tell you how many bytes were sent?

Psst.. XMLHttpRequestUpload

† It's the downloading with Ajax that is the problem. There's no way to tell how big the file is.

Psst..

  var xhr = $.ajax({ type: "HEAD", ...
  xhr.getResponseHeader('Content-Length')

I wound up using Silverlight. Sigh.

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

For commodity uploading, FTP has firewall problems for too many people. Uploads need to be on port 80.

ftp is often blocked in corporate environments.

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

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.

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

Alan, just curious...how do you store your files once uploaded?

We store them on the local server until we can push them to s3. I am hoping to update the uploader to allow posting to s3 upload pre-auth'd urls.

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.

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!

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

edit: forgot we made a screencast last month http://blog.picplum.com/how-to-send-photo-prints-60-seconds/

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

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)

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.

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.

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.

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.

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.

This needs an awesome progress bar - http://swapped.cc/uploader - saw this on reddit few weeks 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 (github: https://github.com/jaimz/file_upload)

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

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.

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

444 issues?! That's a new record.

Nevertheless, this is the sleekest approach to file upload I've seen.

Unfortunately, from the sample that I chose, none of them were actually bug reports.

Ha, almost. I just checked Homebrew this morning and it has 445 outstanding issues.

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.

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

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

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

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

That's covered here: https://github.com/blueimp/jQuery-File-Upload/wiki/Browser-s...

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

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

This is wonderful. I love the feel of interface.

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

Sweet... Really awesome...

This is really nice. Well done!