WebKitFormBoundary included in file payload on direct upload to s3

Question

I have a dropzone.js instance that uploads files directly to an S3 bucket using CORS and then passes me the file information inside of javascript to use. This is the tutorial I followed for it...

The file upload itself seems to work fine, the files show up in the s3 bucket at the correct file path, however all of the files include something like this wrapped around it

------WebKitFormBoundaryMH4lrj8VmFKgt1Ar
Content-Disposition: form-data; name="files[0]"; filename="image-name.png"
Content-Type: image/png


IMAGE CONTENT HERE

------WebKitFormBoundaryMH4lrj8VmFKgt1Ar--

I cannot for the life of me figure out why this is happening. It doesn't matter what type/mime of file I upload, everything includes it.

Any help would be greatly appreciated!

Answer 1

inside your init: function() { .. }

add the following:

 self.on("sending", function(file, xhr, formData) { var _send = xhr.send; xhr.send = function() { _send.call(xhr, file); } });

Answer 2

@TadasTamosauskas is correct that catching the 'sending' event to patch xhr will not work for chunked uploads.

Below is another method that patches xhr with a params function passed in as an option to Dropzone. The chunked execution path also adds the headers required for a resumable file upload using the OneDrive API as documented here: https://docs.microsoft.com/en-us/onedrive/developer/rest-api/api/driveitem_createuploadsession?view=odsp-graph-online

 const CHUNK_SIZE=10485760 //10MiB Dropzone.options.dropzone = { method: "put", headers: { 'Cache-Control': null, 'X-Requested-With': null }, filesizeBase: 1024, maxFilesize: 102400, // 100G in MB, max onedrive filesize chunking: true, chunkSize: CHUNK_SIZE, params: function(files, xhr, chunk) { if (chunk) { const chunk_start = (chunk.index * CHUNK_SIZE) xhr.setRequestHeader('Content-Range', 'bytes ' + chunk_start + '-' + (chunk_start + chunk.dataBlock.data.size - 1) + '/' + files[0].size) var _send = xhr.send xhr.send = function() { _send.call(xhr, chunk.dataBlock.data) } } else { var _send = xhr.send xhr.send = function() { _send.call(xhr, files[0]) } } } }