react-aws-s3-typescript
Open source npm package to upload your files into AWS S3 Bucket directly using react(typescript template)
Table of Contents
Introduction
Open source npm package to upload your media and other types of files directly into AWS S3 Bucket using react typescript template. You can upload and retrive the public url for the file and delete the files if needed.
You need to have an AWS account to use AWS S3 Bucket. If you already do not have an account, create an account here.
Readmore about AWS S3 buket: https://docs.aws.amazon.com/s3/index.html
Features
- Upload files to S3 bucket and retrive the public url
- Delete files from S3 bucket
Installing
Using npm
$ npm install react-aws-s3-typescript
Example
Upload a file to AWS S3 Bucket
You can define a default directory for uploads using the s3Config object
export const s3Config = {
bucketName: 'bucket-name',
dirName: 'directory-name',
region: 'ap-south-1',
accessKeyId:'ABCD12EFGH3IJ4KLMNO5',
secretAccessKey: 'a12bCde3f4+5GhIjKLm6nOpqr7stuVwxy8ZA9bC0',
s3Url: 'https:/your-aws-s3-bucket-url/'
}
import ReactS3Client from 'react-aws-s3-typescript';
import { s3Config } from './s3Config.ts';
const uploadFile = async () => {
const s3 = new ReactS3Client(s3Config);
const filename = 'filename-to-be-uploaded';
try {
const res = await s3.uploadFile(file, filename);
console.log(res);
} catch (exception) {
console.log(exception);
}
List files of a AWS S3 Bucket
import ReactS3Client from 'react-aws-s3-typescript';
import { s3Config } from './s3Config.ts';
const listFiles = async () => {
const s3 = new ReactS3Client(s3Config);
try {
const fileList = await s3.listFiles();
console.log(fileList);
} catch (exception) {
console.log(exception);
}
}
Delete a file from AWS S3 Bucket
import ReactS3Client from 'react-aws-s3-typescript';
import { s3Config } from './s3Config.ts';
const deleteFile = async () => {
const s3 = new ReactS3Client(s3Config);
const filepath = 'directory-name/filename-to-be-deleted';
try {
await s3.deleteFile(filepath);
console.log('File deleted');
} catch (exception) {
console.log(exception);
}
}
Important : Add public-read
Canned ACL to the bucket to grant the public read access for files.
Read more: https://docs.aws.amazon.com/AmazonS3/latest/dev/acl-overview.html#canned-acl
S3 Config
These are the available config options for calling the S3 constructor bucketName
, region
, accessKeyId
and secretAccessKey
are required. Upload will default to root path, if dirName
is not specified.
Credits
This react-aws-s3-typescript
package is heavily inspired by the react-aws-s3
package provided by developer-amit.
License
Released under MIT license.
Back to top