react-use-s3
v2.0.8
Published
React hooks for working with an AWS S3 bucket
Downloads
27
Readme
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