Dropzone

Package	View	Javascript	handler class
Website	Source	Source	DropZoneUploadHandler

1. Read the official docs
2. Create the view as package requires
3. Implement the basic dropzone code

// A quick way setup
var myDropzone = new Dropzone("#my-awesome-dropzone", {
    // Setup chunking
    chunking: true,
    method: "POST",
    maxFilesize: 400000000,
    chunkSize: 1000000,
    // If true, the individual chunks of a file are being uploaded simultaneously.
    parallelChunkUploads: true
});

// Append token to the request - required for web routes
myDropzone.on('sending', function (file, xhr, formData) {
    formData.append("_token", token);
})

Get final response data

Dropzone will not use correct chunk response for final response

Change the onload callback for xhr request to catch the correct response.

// Append token to the request - required for web routes
myDropzone.on('sending', function (file, xhr, formData) {
    formData.append("_token", token);

    // This will track all request so we can get the correct request that returns final response:
    // We will change the load callback but we need to ensure that we will call original
    // load callback from dropzone
    var dropzoneOnLoad = xhr.onload;
    xhr.onload = function (e) {
        dropzoneOnLoad(e)

        // Check for final chunk and get the response
        var uploadResponse = JSON.parse(xhr.responseText)
        if (typeof uploadResponse.name === 'string') {
            $list.append('<li>Uploaded: ' + uploadResponse.path + uploadResponse.name + '</li>')
        }
    }
})

Issues

• Success event response text empty (Dropzone issue) - https://github.com/pionl/laravel-chunk-upload/issues/41