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!

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!

• javascript
• amazon-s3
• upload
• dropzone.js

• 2 Your request method is PUT, but you request body is multipart/form-data. Let the body just be the file. – Musa Commented Aug 5, 2016 at 5:50
• 1 Any idea how? I don't believe I'm changing anything significant in the dropzone.js configuration. Just not sure on how to force it to use the file as the body without including the extra text... – Tom Schlick Commented Aug 5, 2016 at 6:14

2 Answers 2

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);
        }
      });

@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://learn.microsoft./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])
            }
        }
    }
}