Fixing Dropzone issue: WebKitFormBoundary included in file payload

In web development, Dropzone is a popular library used for file uploads. However, some users have encountered an issue where the file content gets wrapped with WebKitFormBoundary in the multipart/form-data payload. This unexpected inclusion of WebKitFormBoundary can cause parsing and processing problems on the server-side.

In this article, we will provide a solution to fix it. By implementing the suggested approach, you can ensure a seamless file upload experience without any unnecessary payload modifications.

Problem:

We utilize a dropzone.js instance to facilitate direct file uploads to our server using CORS (Cross-Origin Resource Sharing). This enables seamless transfer of files from the client-side to our server. Once the files are successfully uploaded, we receive the file information in JavaScript for further processing and utilization. This approach allows us to handle file uploads efficiently and streamline the integration of uploaded files into our application workflow.

Although the file upload process appears to be functioning correctly, with the files being successfully stored on the server at the designated file path, we have noticed an unexpected issue. Each uploaded file seems to have additional wrapping around its content. This unexpected wrapping is causing inconvenience and may require further investigation to ensure that the files are in the desired format without any extraneous additions.

------WebKitFormBoundaryjg2nBy8AlTl8Spnl
Content-Disposition: form-data; name="file"; filename="sample.png"
Content-Type: image/png


IMAGE CONTENT HERE

------WebKitFormBoundaryjg2nBy8AlTl8Spnl--

Typically, this issue arises when uploading files to third-party storage such as S3 bucket or OneDrive.

Solution:

To resolve the issue, we need to upload the file without using multipart form data in Dropzone. This can be achieved by replacing the original xhr.send method with a customized implementation. You can refer to the following Dropzone configuration to implement the fix:

new Dropzone(element, {
  url: "YOUR_FILE_UPLOAD_URL",
  method: "PUT",
  headers: { "Authorization": "Bearer xxxx-xxxx-xxxx-xxxx" },
  sending: function(file, xhr) {
    var _send = xhr.send;
    xhr.send = function() {
      _send.call(xhr, file);
    };
  }
});

By applying this configuration, you'll be able to upload files successfully without the issue of including multipart form data wrapping around them. There is no need for any special fields on client-side at all.

I hope you find this article helpful.
Thank you for reading. Happy Coding..!! 🙂