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

Question

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.

Answer 1

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);

      });
    });
  };