Discussion on: React file upload using S3 pre-signed urls

[pbaker0804]

Great article! One question about the internals - do you know what needs tweaked to prevent the "WebKitFormBoundary" from being wrapped around every file? It's preventing downloads/opens inside of AWS.

An example text/plain, but all files are like this:

------WebKitFormBoundaryWfoHH5ngB2DmLUeM
Content-Disposition: form-data; name="file"; filename="test.txt"
Content-Type: text/plain
This is text.
------WebKitFormBoundaryWfoHH5ngB2DmLUeM--

I tried to tweak the return to no avail:

return {
  options: {
    destination: {
      url: uploadUrl,
      method: 'PUT',
      headers: {
        'Content-Type': type
      }
    },
  },
};

Thank you!

[Dan Stanhope]

Hey there! Thanks very much. Glad you found it helpful.

Here’s a thread explaining the issue: github.com/aws/aws-sdk-js/issues/547

I believe the problem is we’re passing the entire form and not the file.

I’ll take a look tomorrow to make sure it works(not at my computer at the moment). Thanks for pointing this out!

Thanks again & best,
Dan

[pbaker0804]

Hi Dan! I sent an email to the author and he replied almost as fast as you :) You guys are great. He said add "sendWithFormData: false" to the options. It worked perfect, now it sends all file types to AWS without the wrapper, I can download it, view it, all the good stuff. Thanks so much!

New return:

return {
  options: {
    sendWithFormData: false,
    destination: {
      url: uploadUrl,
      method: 'PUT',
      headers: {
        'Content-Type': type
      },
    },
  },

[Dan Stanhope]

That’s awesome! Great fix.

I’ll update the repo to include this new property.

Thanks for the help!