Direct upload to Amazon S3: Corrupted files !

[billyshena]

Hello everyone !

I'm currently trying to setup a direct upload from angular-file-upload to Amazon S3 bucket.
The upload process works fine, ex: If I upload an image of 3MB, the image is correctly transferred on my Amazon S3 bucket (located in Francfort btw, using the new AWS V4 signature)

The issue is the following one: The uploaded files cannot be opened and when I try to "cat" to see the binary content of the file, there are 3 lines added:

------WebKitFormBoundaryfOtaE6TQBF0hzBnw
Content-Disposition: form-data; name="file"; filename="01_-_Rock_Or_Bust.mp3"
Content-Type: audio/mp3

For each uploaded file, there is this "webkitformboundary" stuff added inside my file's binary content which is the reason of my issue I guess.

Does anyone know how to solve it?

I have a Node.js server that is basically generating pre-signed url and my app using this plugin to do the upload to S3.

I've been looking to solve this with my team for 24 hours now but no clue at moment.
Any ideas?

Best regards,

[AdityaManohar]

This usually occurs because you are serializing the entire form when you post to your signed URL.

Instead of serializing your form you will need to supply the File object from the form control as the data to your asynchronous request.

Form control:

<input type="file" id="upload"/>

Uploading your file:

var upload = document.getElementById('upload');
var file = upload.files[0];

// Assuming jQuery
$.ajax({
  type: 'PUT',
  url: signedUrl,
  data: file,
  success: callback
});

Let me know if this helps.

[billyshena]

Hi Aditya ! Thanks for your quick answer.
Well, this is how my Ajax request looks like:

[AdityaManohar]

Like I mentioned earlier, this does look like your are serializing the entire form. Instead of posting the entire form to the signed URL, you will have to upload only the file object asynchronously to the signed URL.

[billyshena]

Hi, your example is working like a charm and the file is not corrupted anymore after being uploaded to Amazon S3.

However, I've tried to use some angular plugins to handle the upload for me https://github.com/nervgh/angular-file-upload but this is not working (I have to do something with transformRequest?). If I use any kind of plugin => the file is still corrupted. I'm sending the same parameters as the working sample u provided.

[AdityaManohar]

I'm not certain about the details of how this plugin works. I would recommend opening an issue with the maintainer of that plugin to help debug any issues with the plugin.

[lsegal]

Marking this as closed since this is not an issue with the SDK. @billyshena the plugin you referenced is posting form data, which is simply not compatible with a binary upload to S3. You do not want to post the entire form, which uploads per the HTTP spec as multipart/form-data, but instead need to upload only the file portion as @AdityaManohar pointed out.

I don't know enough whether this is possible or not using the plugin you referenced, but if it is not, you will not be able to use that specific plugin. Again, this is not a compatibility issue with the SDK-- the behavior happens because you are uploading the entire form instead of a single element. There might be other plugins that can work for you, but you might also consider simply not using a plugin for this at all, as the code provided above is very simple to use.

[guumaster]

I wrote this simple gist with a working example to upload a file with an $.ajax() call.

[tsdmrfth]

I have same issue on React Native. I am trying to upload user documents to s3 with signed url. How can i send document files without sending it as FormData?

[trivikr]

Locking this thread as the issue is old, and resolved.
Please open a new issue for related bugs and link to relevant comments in this thread.