react-use-s3

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