react-use-s3 v2.0.8

React custom hook for uploading files to an AWS S3 bucket with progress showing abilities in percentages

Install

npm i react-use-s3

Usage

import useUploadS3WithPresignedUrl from 'react-use-s3'; //ES6

const url = 'your presigned url here';
const file = { name: '', type: '', data: '' }
const [progress, setProgress] = useState('In Progress'); //useState hook to indicate progress of file while uploading
const [response, setResponse] = useState({ status: 0, responseText: '' }); //useState hook to indicate upload response when 
					      			           //request is done whether is successful or not

//Upon successful upload request, setResponse will set the response as:
{
  status: 200,
  responseText: 'https://{bucket}.{region}.amazonaws.com/{fileName}.{fileExtension}'
}

//Upon unsucessful upload request, setResponse will set the response as:
{
  status: 403,
  responseText: 'Upload server error, please check your presigned url'
}

const handleClick = useUploadS3WithPresignedUrl({
  url,
  file,
  setResponse,
  setProgress,
});

<button onClick={() => handleClick()}> My Upload File Button </button>

API

useAWSUploadWithFile(options)

Upload a file to an AWS S3 bucket while getting updates on the current upload progress; returning the URI of said file upon completion

options Type: object

 url  Type: String  Presigned url

 file  Type: object  File options

 name  Type: String  File name

 type  Type: String  File type

 data  Type: String  File data

 setResponse  Type: Function  Function to be called once the file has been successfully uploaded. Most likely from a useState hook

 setProgress  Type: Function  Function to be called for every progress update while uploading file. Most likely from a useState hook

Demo

For a working demo, you can find it here: https://github.com/sebastianserrano/react-s3