Question

142

React-native upload image to amazons s3

rated 0 times [ 148] [ 6] / answers: 1 / hits: 22171 / 9 Years ago, tue, june 9, 2015, 12:00:00

I want to upload images from my app to S3 server. I have all data and codes calculated (tested using curl on computer) but I can't figure out how to call 'fetch' correctly. I'm getting response:

'At least one of the pre-conditions you specified did not hold. Condition: Bucket POST must be of the enclosure-type-multipart/form-data'

How can I recreate form-data in react-natives fetch? There is no FormData to which I can append and then send it like in fetches example.

EDIT:
Thanks @philipp-von-weitershausen, greate that you have added this feature. However I have some troubles calling it. I'm getting Unsupported BodyInit type. Found that is because in fetch.js: support.formData returns false. What am I missing when I call fetch?

My code example:

 var form = new FormData();

 form.append(FormData, true)

 form.append(name, this.state.invoiceNumber)

 form.append(key, this.state.invoiceNumber)

 form.append(Content-Type, image/png)

 form.append('file', this.props.uri)

 //alert(FormData.prototype.isPrototypeOf(form))



  fetch(amazon_url,{body: form,mode: FormData, method: post, headers: {Content-Type: multipart/FormData}})

          .then((response) => response.json())

          .catch((error) => {

             alert(ERROR  + error)

          })

          .then((responseData) => {

             alert(Succes + responseData)

          })

          .done();

Answers

Only authorized users can answer the question. Please sign in first, or register a free account.

clifford

Add To Favorites

Follow

Total Points: 86

Total Questions: 114

Total Answers: 111

Location: Wales

Member since Mon, May 17, 2021

3 Years ago

clifford questions

1 No routes matched location /rewards-store

Sat, Dec 18, 21, 00:00, 2 Years ago

1 TypeError: Cannot read properties of undefined (reading 'country')

Mon, Dec 6, 21, 00:00, 2 Years ago

1 React Redux Pagination

Thu, Mar 18, 21, 00:00, 3 Years ago

1 Discord JS Manage Roles Permission Missing even though bot is admin

Sat, Jun 13, 20, 00:00, 4 Years ago

1 How to catch events is vue.js v-calendar

Thu, May 7, 20, 00:00, 4 Years ago

View All

answered 9 Years ago travion · Accepted Answer

Some people asked, so I'm posting how I did it. It was done quiet long time ago so if you have any comments or something is really bad done I'm open to critic ;)
Photo is in read from cameraRoll and stored in 'latestPhoto'.

Uploading photo to S3 server:

Step 1: Generate data:

_addTextParam() {

    var textParams = this.state.textParams;

    s3_upload_id = this.makeid()

    textParams.push({ name: key, value: this.state.upload_path + s3_upload_id + '/' + this.state.att_name + .jpg })

    textParams.push({ name: AWSAccessKeyId, value: this.state.key })

    textParams.push({ name: acl, value: public-read })

    textParams.push({ name: success_action_status, value: 201 })

    textParams.push({ name: policy, value: this.state.policy })

    textParams.push({ name: signature, value: this.state.signature })

    textParams.push({ name: Content-Type, value: image/jpeg })



    this.setState({ textParams: textParams });

  }

Step 2: Send data:

  _send() {



    this._addTextParam()

    var xhr = new XMLHttpRequest();

    xhr.open('POST', http:// + this.state.fs_domain + . + this.state.server);

    xhr.onload = () => {

      this.setState({ isUploading: false });

      if (xhr.status !== 201) {

        AlertIOS.alert( 

          'Upload failed',

          'Expected HTTP 200 OK response, got ' + xhr.status + / + xhr.responseText

        );

        return;

      }



      if (!xhr.responseText) {

        AlertIOS.alert(

          'Upload failed',

          'No response payload.'

        );

        return;

      }

      var index = xhr.responseText.indexOf( http:// + this.state.fs_domain + . + this.state.server);

      if (index === -1) {

        AlertIOS.alert(

          'Upload failed',

          'Invalid response payload.'

        );

        return;

      }

      var url = xhr.responseText.slice(index).split('n')[0];

      this.state.s3_file_id = xhr.responseText.split('Tag>')[1].split('')[0]

      this.state.s3_file_path = xhr.responseText.split('Location>')[1].split('<')[0]

      this.setState({ isUploading: false });

      RCTDeviceEventEmitter.emit('Uploaded')



    };

    var formdata = new FormData();



    this.state.textParams.forEach((param) => {

        formdata.append(param.name, param.value)

      }

    );



    formdata.append('file', {...this.state.latestPhoto, name: (this.state.att_name+.jpg) });



    xhr.send(formdata);

    this.setState({ isUploading: true });



  },