Upload image to S3 using presigned URL

Question

I've been having a hell of a time getting a simple test to work. I am working on a mobile app in react native. I want to generate a presigned URL and use that url to upload a video file to s3. I'm currently just trying to test this approach by doing:

const file = fs.readFileSync('./video.mp4')
s3.getSignedUrl('putObject', {Bucket: 'mybucket', Key: 'video.mp4'}, (err, url) => {
  if (err) { console.log(err); }
  else {
    fetch(url, {
       method: 'PUT',
       body: file
    })
    .then(success => console.log(success.status))
    .catch(e => console.log(e))
  })
})

I get a 200 status code, but the 'file' that appears on S3 has 0 bytes. I noticed the same thing happens when I try to upload ANY file that I received via fs.readFileSync. I managed to work around this temporarily be doing fs.readFileSync('./video.mp4', 'base64'), but this won't work in my app, because I need to access the video in it's original format, not as a base64 string. I also successfully used s3.upload, but that won't work in my app either, because I want to authenticate all my user's actions on my server before I give them permission to do an interaction with s3. I'd really appreaciate some advice. I've been fiddling around with ContentTypes and ContentLengths all day.

You follow this way tu put and get object? -> AWSJavaScriptSDK — Black Sheep
– Black Sheep, Commented Apr 18, 2016 at 1:01

Yi Feng Xie · Accepted Answer · 2016-04-20 15:22:20Z

17

You need to use FormData to wrap your file with parameter named file like following:

var body = new FormData();
body.append('file', file);
fetch(url, { method: 'PUT', body: body });

answered Apr 20, 2016 at 15:22

Yi Feng Xie

5,1271 gold badge28 silver badges31 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

user2689931 Over a year ago

Thanks so much. This is awesome! Thank you. It would seem that the fetch API cannot handle node buffers. Both wrapping it in FormData as well as using the request API solve this issue.

user2689931 Over a year ago

Quick question: When I do this approach in react native itself, the video that ends up on S3 has some heads appended to the content at the beginning, making the file unplayable. Any ideas on how to upload the video without additional information being appended to it?

Yi Feng Xie Over a year ago

it is react-native issue, they use incorrect content-type for uploading. I fixed the issue by using xhr for uploading. instead of using FormData+fetch, see xhr usage in facebook.github.io/react-native/docs/… and final key is xhr.send({ uri: uri, type: 'video/mp4' }) for you.

Collectives™ on Stack Overflow

Upload image to S3 using presigned URL

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related