resumable.js example

upload.js

var uploader = (function(){
    var r = Resumable({
        target: '/upload/stream',
        chunkSize: 1*1024*1024,
        query: {
            serie_id: {{ $serie->id }}
        }
    }),

    fileList = $('.file-list');

    if (! r.support) {
        // show links to download chrome, firefox, safari, and ie

    }

    r.assignBrowse(document.getElementById('browse-button'));
    r.assignDrop(document.getElementById('drop-target'));

    r.on('fileAdded', function(file){
        var page = "<tr data-file-unique-identifier='" + file.uniqueIdentifier + "'>" +
            "<td>" + file.fileName + "<td>" +
            "<td width='100%'>" +
                "<div class='progress mtl'>" +
                    "<div class='bar' style='width: 0%;'></div>" +
                "</div>" +
            "</td>" +
            "<td class='right-text'>" +
                "<span class='btn btn-small btn-primary progress-pause-upload'><i class='icon-pause'></i></span>" +
            "</td>" +
            "<td class='right-text'>" +
                "<span class='btn btn-small btn-primary progress-resume-upload'><i class='icon-play'></i></span>" +
            "</td>" +
        "</tr>";

        fileList.append(page);

        r.upload();
    });

    r.on('fileSuccess', function(file,message){
        $('[data-file-unique-identifier=' + file.uniqueIdentifier + ']').find('.bar').addClass('bar-success').css('width', '100%').closest('tr').show().delay(2000).remove();

        var inputs = {
            'filename': file.fileName,
            'serie_id': {{ $serie->id }}
        }

        $.post('/upload/create', inputs, function(data){
            $.post('/serie/read_last_upload', inputs, function(data){
                var json = jQuery.parseJSON(data);
                $('.whats-included').append(json.page);
                $('.whats-included .media').last().find('.editable').editable();
            });
        });
    });

    r.on('fileError', function(file, message){
        $('[data-file-unique-identifier=' + file.uniqueIdentifier + ']').find('.bar').addClass('bar-danger');
    });

    r.on('pause', function(){
        l(1);
    });

    r.on('fileProgress', function(file, message) {
        var progress = Math.floor(file.progress() * 100);

        $('[data-file-unique-identifier=' + file.uniqueIdentifier + ']').find('.bar').css('width', progress + '%');
    });

    fileList.on('click', '.progress-pause-upload', function(){
        var identifier = $(this).closest('tr').data('file-unique-identifier'),
            file = r.getFromUniqueIdentifier(identifier);

        file.resumableObj.pause();
    });

    fileList.on('click', '.progress-resume-upload', function(){
        var identifier = $(this).closest('tr').data('file-unique-identifier'),
            file = r.getFromUniqueIdentifier(identifier);

        file.resumableObj.upload();
    });
})();

laravel multi part upload just for keywords ;)