Fault-tolerant HTML5 uploads with Resumable.js [Open JavaScript]
With 23 Video we (at 23) receive a large number of really, really large files every day. At times, we get files of several gigabytes transferred over a simple HTTP connection. Usually, this works out alright, but we’ve wanted to make better use of some new features in modern browsers to make uploads more stable — specifically, to allow users to pause their uploads and have the uploads automatically resume if the internet connection fails (either locally or to our servers).
This approach is fairly new and is only available in Chrome (11+) and Firefox (4+), so no one has packaged the feature-set we wanted nicely yet. This calls for open sourcing a few hundred lines of code and a victory lap:
We bring you Resumable.js as our answer.
Resumable.js is a JavaScript library built on top of the HTML5 File API to:
- Allow selection or dropping of multiple files.
- Handle queuing and progress indications during upload.
- Uploads files in small chunks, rather than in a single big batch.
- Automatically resume uploads if something fails, for example if the network connection drops.
The first two features have been available through Flash and related tools for quite a while, but I’m pretty excited about the latter two. Chunking and auto-resuming will allow for a degree of stability in HTTP uploading we haven’t seen before: Resumable.js will simply keep uploading until all the bits of a file has been sent. And it all happens transparently to the user.
The Resumable.js-based uploader will make its appearance in 23 Video later this summer, but we will also add support for this method in our API for direct browser uploads — in fact the prototype uses this API method behind the scenes.
