JavascriptChunkingFiles

Ability to chunk files to the server using Ajax Requests.

HTML

<link rel="stylesheet" href="//netdna.bootstrapcdn.com/bootstrap/3.0.2/css/bootstrap.min.css">
<div class="row">
    <div class="col-md-6">
        <button id="start" class="btn btn-block btn-default">Start</button>
    </div>
</div>

<div class="row">
    <div class="col-md-6">
        <div class="progress">
            Upload Progress
            <div class="progress-bar" style="width: 0"></div>
        </div>
    </div>
</div>

<div class="alert alert-danger"></div>

JavaScript

var FileUploadManager = function (chunkByteSize) {

            var _chunkSize = typeof (chunkByteSize) !== 'undefined' ? chunkByteSize : 64,
                _files = [],
                _totalFileLength = 0,
                _uploadedLength = 0,
                _inProgress = false;


            // Public methods
            return {
                addFile: function (id, data) {

                    // Validate arguments
                    if (_inProgress) {
                        throw new Error("Files are being uploaded. Unable to add files until complete");
                    }
                    
                    if (typeof (data) === 'undefined' || data.length == 0)
                        throw new Error("File length is zero. Unable to add file.");
                    
                    _files.push(new FileUploader(id, data, _chunkSize));
                    _totalFileLength += data.length;
                    return this;
                },
                uploadFiles: function (overallProgress) {

                    if (_totalFileLength == 0) {
                        return this; // Get out!
                    }
                    
                    _inProgress = true;

                    // Handler for every completed file chunk
                    var chunkComplete = function (data) {
                        _uploadedLength += data.ChunkedAmount;

                        if (typeof (overallProgress) !== 'undefined') {
                            var percentageComplete = (_uploadedLength / _totalFileLength) * 100;
                            overallProgress({ TotalProgress: percentageComplete });
                        }
                    };

                    for (var i = 0; i < _files.length; i++) {
                        _files[i].start(chunkComplete);
                    }
                    _inProgress = false;
                    return this;
                }
            };
        };

        var FileUploader = function...