Aws-s3-reactjs NPM

aws-s3-reactjs

Open Source Module to Upload your Media and files into AWS S3 Bucket directly from Front-end React.

Video

How to use = https://youtu.be/1U9Ohj3T4gI

https://www.npmjs.com/package/aws-s3-reactjs

S3Client AWS-S3

S3Client - A Javascript Library for AWS S3 File Upload

Using NPM

npm install --save aws-s3-reactjs

Using Yarn

yarn add aws-s3-reactjs

Examples Uploading An Image

Uploading to S3

import S3 from 'aws-s3-reactjs';

const config = {
    bucketName: 'myBucket',
    dirName: 'media', /* optional */
    region: 'eu-west-1',
    accessKeyId: 'JAJHAFJFHJDFJSDHFSDHFJKDSF',
    secretAccessKey: 'jhsdf99845fd98qwed42ebdyeqwd-3r98f373f=qwrq3rfr3rf',
    s3Url: 'https:/your-custom-s3-url.com/'
}

const ReactS3Client = new S3(config);
/*  Notice that if you don't provide a dirName, the file will be automatically uploaded to the root of your bucket */

const newFileName = 'fileName.extesion';
// https://docs.aws.amazon.com/AmazonS3/latest/userguide/acl-overview.html
// acl default: public-read
ReactS3Client
    .uploadFile(file, newFileName, "contentType", "acl-optional")
    .then(data => console.log(data))
    .catch(err => console.error(err))

  /**
   * {
   *   Response: {
   *     bucket: "myBucket",
   *     key: "image/test-image.jpg",
   *     location: "https://myBucket.s3.amazonaws.com/media/test-file.jpg"
   *   }
   * }
   */
});

Deleting an existing file in your bucket

In this case the file that we want to delete is in the folder 'photos'

import S3 from 'aws-s3-reactjs';


const config = {
    bucketName: 'myBucket',
    dirName: 'media', /* optional */
    region: 'eu-west-1',
    accessKeyId: 'JAJHAFJFHJDFJSDHFSDHFJKDSF',
    secretAccessKey: 'jhsdf99845fd98qwed42ebdyeqwd-3r98f373f=qwrq3rfr3rf',
    s3Url: 'https:/your-custom-s3-url.com/'
}

const ReactS3Client = new S3(config);

const filename = 'hello-world.docx';

/* If the file that you want to delete it's in your bucket's root folder, don't provide any dirName in the config object */

//In this case the file that we want to delete is in the folder 'photos' that we referred in the config object as the dirName

ReactS3Client
    .deleteFile(filename)
    .then(response => console.log(response))
    .catch(err => console.error(err))

  /**
   * {
   *   Response: {
   *      ok: true,
          status: 204,
          message: 'File deleted',
          fileName: 'hello-world.docx'
   *   }
   * }
   */
});

Defaults your bucket to public-read : http://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html

config