The problem is a common one for Internet users trying to upload a large file, where the process is either corrupted or aborted. Depending upon connection speed and provider fair use policies, this can be an expensive, frustrating and time consuming process.
Enter 23, a company that creates tools to unleash the power of visual sharing, with its free Resumable.js (www.resumablejs.com); a JavaScript library for simultaneous, stable uploads via the HTML5 File API. 23 offers photo and video sharing platforms, so this technology is a natural fit for similar websites, both on the front- as well as backend.
The library is designed to introduce fault-tolerance into the upload of large files through HTTP by splitting each file into small chunks.
According to a company rep, the library is designed to introduce fault-tolerance into the upload of large files through HTTP by splitting each file into small chunks. Whenever a chunk’s upload fails, it is retried until it succeeds.
“This allows uploads to automatically resume uploading after a network connection is lost either locally or to the server. Additionally, it allows for users to pause, resume and even recover uploads without losing state,” the rep explains. “Resumable.js does not have any external dependencies other the HTML5 File API. This is relied on for the ability to chunk files into smaller pieces.”
Support is thus limited to Firefox 4+ and Chrome 11+, but that covers a lot of ground.
New Resumable objects contain information of what and where to post. To allow files to be either selected or dragdropped, assign a drop target and a DOM item to be clicked. After this, interaction with Resumable.js is done by listening to events.
The Resumable website provides full documentation of options along with samples.
“Most of the magic for Resumable.js happens in the user’s browser, but files still need to be reassembled from chunks on the server side,” the rep explains. “This should be a fairly simple task and can be achieved in any web framework or language, which is able to receive file uploads.”
A number of extra parameters are sent along with all requests in order to handle the state of upload chunks, allowing the same chunk to be uploaded more than once; helping mitigate unstable network environments, which is exactly what Resumable.js is made for.
For every request, chunk reception can be confirmed using HTTP status codes.
Using GET allows uploads to be resumed after browser restarts or even across browsers, with the company noting that in theory it could even run the same file upload across multiple tabs or different browsers. POST data requests are required to use Resumable.js to receive data, but corresponding GET requests can be implemented with the same parameters.
As handy as it is, Resumable.js isn’t necessarily the best choice for every application, as this library is explicitly designed for modern browsers supporting advanced HTML5 file features, and the maker’s motivation is to provide stable and resumable support for large files, allowing consistent, predictable uploads of several GB files through HTTP.
“If your aim is just to support progress indications during upload/uploading multiple files at once,” the rep concludes, “Resumable.js isn’t for you.”
As for alternatives in those cases, 23 recommends SWFUpload and Plupload, as they provide the required features with wider browser support.
