Advanced Uploading Techniques — Part 2


In our previous tutorial on chunked uploading, we learned how to build an uploading system using the File API to send small chunks of data to better respond to the bandwidth demands of mobile upload speeds and large files. We also learned how this opened up the ability for us to pause and resume uploads with the push of a button. Our goal is to build an uploader capable of correcting errors during the upload process automatically. The first of these which we will address is the lack of a connection. Hardwired ethernet connections will always provide the most stable uploads, but for mobile browsers, especially ones not connected via WiFi, we must be able to react to a loss of connection.

Introducing the online and offline events

Happily, this is ridiculously easy in modern browsers, and since the browsers which support our chunked upload also support these events, we don’t have to commit to writing a lot of code. The constructor to our updated ChunkedUploader class now looks like this:

function ChunkedUploader(file, options) {
    if (!this instanceof ChunkedUploader) {
        return new ChunkedUploader(file, options);
    }
 
    this.file = file;
 
    this.options = $.extend({
        url: '/upload'
    }, options);
 
    this.file_size = this.file.size;
    this.chunk_size = (1024 * 100); // 100KB
    this.range_start = 0;
    this.range_end = this.chunk_size;
 
    if ('mozSlice' in this.file) {
        this.slice_method = 'mozSlice';
    }
    else if ('webkitSlice' in this.file) {
        this.slice_method = 'webkitSlice';
    }
    else {
        this.slice_method = 'slice';
    }
 
    this.upload_request = new XMLHttpRequest();
    this.upload_request.onload = this._onChunkComplete;
 
    // Respond to changes in connection
    if ('onLine' in navigator) {
        window.addEventListener('online', this._onConnectionFound);
        window.addEventListener('offline', this._onConnectionLost);
    }
}

The implementation of those events (which you should place on the prototype of ChunkedUploader), is also quite straightforward:

ChunkedUploader.prototype = {
 
// Internal Methods __________________________________________________
 
    // ...existing prototype code
 
// Event Handlers ____________________________________________________
 
    // ...existing prototype code
 
    function _onConnectionFound() {
        this.resume();
    }
 
    function _onConnectionLost() {
        this.pause();
    }
}

And that’s it! As a bit of homework/extra credit, you’ll want your ChunkedUploader class to dispatch events when it is paused so the view can properly react to these changes in connection. Rework the controller code from the previous tutorial to change the state of the pause/resume button based on pause and resume events dispatched from the class, rather than the actual click event of the button.

More Reading:

11 thoughts on “Advanced Uploading Techniques — Part 2

  1. Hello

    First of all, thank you for these tutorials. Been playing with the first part and now onto the next.

    I know you’ve mentioned that you are going to talk about the ‘server side’ of things in a future one but I spent the entire day trying to get c# code to process the files being uploaded. The upload works fine, but the handler I developed (which works well with other uploaders – including those with flash), does not seem to GET the files — ie. the context.request.files is empty.

    Can you please shed some light as to what might be the problem? I tried changing the mime, content type in various places, but nothing.

    Many thanks.

  2. Hi! This tutorial is amazing! I really wanted to try this out, but it did not work for me…. Can I please have your sources? Thanks! :)

    • I would be amazing if it actually worked. But it doesn’t. I posted a long time ago that it didn’t work with no reply. I guess the author has posted it and moved on.

      • Hi everyone, thanks for the comments, we’re looking into this. The original author Kevin is currently snowed under at work, but we’re going to try to fix it in his absence. Watch this space!

        • This is my code: http://dodo.moowdesign.eu/chunk_upload.html

          I just changed some stuff like .live() did not work for me..

          But now, if you are in FireFox, press CTRL+SHIFT+J, add any file, press Upload button and you can see following error at the bottom: this._onUploadComplete is not a function, on Line: 163

          This function is not even in the code, so I’m asking WTF? So this code is not even finished yet? But It looked so great when I first saw it.. I was just like OMG uploading with progressbar and stop and resume? :O But now I see it is just doing nothing… Really sad :(

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

Current day month ye@r *