CODEWITHSUNDEEP
javascriptreactjsamazon-web-servicesreact-nativeamazon-s3
Subhash Patel
Subhash Patel

Reputation: 674

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

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.

Upvotes: 3

Views: 5343

Answers (3)

Rajesh N
Rajesh N

Reputation: 6673

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

Upvotes: 0

krissanawat
krissanawat

Reputation: 626

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.

Upvotes: 0

Vandit Mehta
Vandit Mehta

Reputation: 2587

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

      });
    });
  };

Upvotes: 8

Related Questions