Request headers getting added to files during upload PUT request from browser

Hi @pornel! Thank you for this excellent library. So, I was trying to upload files to S3, using PUT (to a pre-signed url) and ran into the following issue. I looked through StackOverflow and previous issues, and couldn’t find anything which resolved this, hence this ticket.

The file I was uploading is getting corrupted. On investigation, it seems that is because the following headers are being appended to the file.

I was unable to figure out -

1. Why the headers are being added?
2. In the headers being added to the file, the Content-Disposition is different than that being set in the Request Header. Why is that?

Here are a couple of screenshots: Headers added in the payload:

Superagent request object

Following the docs, here is how I am making the request from my browser:

request.put(s3path)
  .set('Content-Type', 'image/jpeg')
  .set('Content-Disposition', 'inline')
  .attach(fileSlug, filename.jpg)
  .on('progress', updateCallback)
  .end(success, failure)

And if you think a doc clarification is needed, I’ll be happy to PR!

Thank you!

[oyeanuj]

@pornel @focusaurus Thank you for taking a look! I found the root issue, and the solution (in case anyone else runs into this).

The content boundary header added seems to be the default browser behavior whenever attaching files, or submitting a multi-part request (so, removing the content-headers above didn’t matter).

It seems that typically webservers know how to strip that out when dealing with that upload, but not S3. S3 (and other object stores) requires the files to be uploaded as the main body/data. So, instead of the above method, the following works -

request.put(s3path)
  .set('Content-Type', 'image/jpeg')
  .set('Content-Disposition', 'inline')
  .send(theFile)     // <--------------------------- THIS LINE instead of .attach()
  .on('progress', updateCallback)
  .end(success, failure)

At this point, the browser sends this as the main body of the request, rather than assuming it to be multipart/form-data request (which seems to be the default behavior).

Let me know if you guys think this sort of case needs to be mentioned in the main superagent homepage somewhere as an example!

[bcepuran]

thank you @oyeanuj ! using .send is what I was missing.