2

I am going to upload image on Amazon S3 in React Native.

I have S3 signedUrl for uploading image.

How can I upload image using this url in React Native?

If anybody tried this, please help me.

Thank you!

wagng
  • 691
  • 2
  • 11
  • 22
  • What are you supposed to do with the URL? It is just a POST? If so, just make the request using FETCH. More details would be helpful. – rooftop Apr 18 '16 at 13:02

3 Answers3

6

It's quite simple, I spent a lot of time to discover that:

const xhr = new XMLHttpRequest()
xhr.onreadystatechange = function() {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      // success
    } else {
      // failure
    }
  }
}
xhr.open('PUT', presignedUrl)
xhr.setRequestHeader('Content-Type', fileType)
xhr.send({ uri: filePath, type: fileType, name: fileName })
  • filePath is the full path to the file
  • fileType is the mime type of the file
  • fileName is the file name

source: http://blog.rudikovac.com/react-native-upload-any-file-to-s3-with-a-presigned-url/

Abner Terribili
  • 780
  • 6
  • 10
  • 2
    I should point out that the presigned url must have been signed with the Content-Type (like 'image/png', etc.). This client side code wasn't working until we signed correctly on the server side as well. – Chris Livdahl Oct 18 '17 at 21:07
1

You can just use fetch as following:

import { ImagePickerIOS } from 'react-native';

ImagePickerIOS.openSelectDialog({},(assetUri)=>{
  var photo = {
    uri: assetUri,
    type: 'image/jpeg',
    name: 'main.jpg'
  }

  var body = new FormData();
  body.append('file', photo);

  fetch(presignedUrl, {
    method: 'put', body: body
  });
},()=>{ console.log('failed'); })
Yi Feng Xie
  • 4,378
  • 1
  • 26
  • 29
  • Did you test it? – Abner Terribili Jun 20 '17 at 00:10
  • sure! this my code snippet in past. you also need to have backend to generate `s3 presignedUrl ` – Yi Feng Xie Jun 20 '17 at 02:43
  • It does not work. You can't submit form data using PUT. You need to read the documentation before post your answer or even test your code. Section 9.6 http://www.ietf.org/rfc/rfc2616.txt – Abner Terribili Jun 20 '17 at 13:26
  • you are wrong! see http://docs.aws.amazon.com/AmazonS3/latest/dev/UploadObjectPreSignedURLRubySDK.html. given s3 presignedUrl, you need to use http `put` method to upload. – Yi Feng Xie Jun 21 '17 at 04:04
  • You can't submit FORM DATA using PUT method, you should send your file as a body, not a form data as a body, you know? – Abner Terribili Jun 22 '17 at 12:01
  • I dont want to waste my time to argue with you. please validate the code by yourself. the arrow function of code is really on my working project. oh.. please also generate your s3 presignedUrl first. – Yi Feng Xie Jun 22 '17 at 16:00
0
  const file = {
        uri: response.uri,
        name: "image.png",
        type: "image/png"
      }

      const options = {
      keyPrefix: "",
      bucket: "",
      region: "",
      accessKey: "",
      secretKey: "",
      successActionStatus: 200
     }

     RNS3.put(file, options).then(response => {
       if (response.status !== 200)
       alert(response.body);
       else {
//Success## 


----------


 ##
         alert(JSON.stringify(response))

       }
     });
Krishna Mohan Singh
  • 327
  • 4
  • 8