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