react-native through upload image on s3 Bucket using aws-sdk

user_8951733 0
Viewed 4131

I am using aws-sdk for upload image on the s3 bucket. Please look at my code below I already spend one day in it. 

uploadImageOnS3 = () => {

    var S3 = require("aws-sdk/clients/s3");

    const BUCKET_NAME = "testtest";
    const IAM_USER_KEY = "XXXXXXXXXXXXX";
    const IAM_USER_SECRET = "XXXXX/XXXXXXXXXXXXXXXXXXXXXX";

    const s3bucket = new S3({
      accessKeyId: IAM_USER_KEY,
      secretAccessKey: IAM_USER_SECRET,
      Bucket: BUCKET_NAME
    });
    let contentType = "image/jpeg";
    let contentDeposition = 'inline;filename="' + this.state.s3BucketObj + '"';
         let file= {
         uri: this.state.fileObj.uri,
         type: this.state.fileObj.type,
         name: this.state.fileObj.fileName

     };
    s3bucket.createBucket(() => {
      const params = {
        Bucket: BUCKET_NAME,
        Key: this.state.s3BucketObj,
        Body: file,
        ContentDisposition: contentDeposition,
        ContentType: contentType

      };
      s3bucket.upload(params, (err, data) => {
        if (err) {
          console.log("error in callback");
          console.log(err);
        }
        // console.log('success');
        console.log(data);

      });
    });
  };

Error:

Unsupported body payload object

Please help me to short out I am also using react-native-image-picker for image upload.

react-native reactjs amazon-web-services amazon-s3 javascript
3 Answers

You have to use array buffer in body stream to pass data object. As per the aws documentation you can pass data stream, string, array buffer or blob data type in body parameter.

Please check below code, which will resolve your issue,

import fs from "react-native-fs";
import { decode } from "base64-arraybuffer";

uploadImageOnS3 = async() => {

    var S3 = require("aws-sdk/clients/s3");

    const BUCKET_NAME = "testtest";
    const IAM_USER_KEY = "XXXXXXXXXXXXX";
    const IAM_USER_SECRET = "XXXXX/XXXXXXXXXXXXXXXXXXXXXX";

    const s3bucket = new S3({
      accessKeyId: IAM_USER_KEY,
      secretAccessKey: IAM_USER_SECRET,
      Bucket: BUCKET_NAME,
      signatureVersion: "v4"
    });
    let contentType = "image/jpeg";
    let contentDeposition = 'inline;filename="' + this.state.s3BucketObj + '"';
    const fPath = this.state.fileObj.uri;

    const base64 = await fs.readFile(fPath, "base64");
    //console.log(base64);

    const arrayBuffer = decode(base64);
    //console.log(arrayBuffer);
    s3bucket.createBucket(() => {
      const params = {
        Bucket: BUCKET_NAME,
        Key: this.state.s3BucketObj,
        Body: arrayBuffer,
        ContentDisposition: contentDeposition,
        ContentType: contentType

      };
      s3bucket.upload(params, (err, data) => {
        if (err) {
          console.log("error in callback");
          console.log(err);
        }
        // console.log('success');
        console.log(data);

      });
    });
  };
user_20065030

You can check out the React Native AWS amplify documentation for the proper process. In the documentation, it is mentioned that you can pass data stream, string, array buffer, or blob data type in body parameter.

user_7336760 
    import AWS from 'aws-sdk';
    import fs from 'react-native-fs';
    import {decode} from 'base64-arraybuffer';
    export const uploadFileToS3 = async (file) => {
    
        const BUCKET_NAME = 'xxxxx';
          const IAM_USER_KEY = 'xxxxxxxxxxxxxxxxx';
          const IAM_USER_SECRET = 'xxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxxx';
        
          const s3bucket = new AWS.S3({
            accessKeyId: IAM_USER_KEY,
            secretAccessKey: IAM_USER_SECRET,
            Bucket: BUCKET_NAME,
            signatureVersion: 'v4',
          });
          const contentType = file.type;
          const contentDeposition = `inline;filename="${file.name}"`;
          const fPath = file.uri;
        
          const base64 = await fs.readFile(fPath, 'base64');
        
          const arrayBuffer = decode(base64);
        
          return new Promise((resolve, reject) => {
            s3bucket.createBucket(() => {
              const params = {
                Bucket: BUCKET_NAME,
                Key: file.name,
                Body: arrayBuffer,
                ContentDisposition: contentDeposition,
                ContentType: contentType,
              };
              s3bucket.upload(params, (error, data) => {

                if (error) {
                  reject(getApiError(error));
                } else {
                  console.log(JSON.stringify(data));
                  resolve(data);
                }
              });
            });
          });
}
user_9967870
Related