Skip to content

Dropzone

Martin Kluska edited this page Jun 21, 2020 · 7 revisions
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

Clone this wiki locally