@newfrontdoor/s3-file-upload

<S3Dropzone />

Adds S3 upload functionality to react-dropzone

Props

host

URL the file will be hosted from, typically an S3 bucket, or Cloudfront url

uploadUrl

URL to fetch a Presigned Post from

children

A single React element. Will be cloned using React.cloneElement, and be rendered with a src prop with the url of the uploaded file (${host}/${fileName}).

title

The title of the uploaded file

initialFileName

The name of the already uploaded file (${host}/${initialFileName})

onChange

Called when a file is uploaded. Called with the result of the S3 file upload

type UploadFileResult = { key: string }

Usage

import {S3Dropzone} from '@newfrontdoor/s3-file-upload';
import {AudioPlayer} from '@newfrontdoor/audio-player';

<S3Dropzone host={host} uploadUrl={uploadUrl} onChange={onChange}>
  <AudioPlayer />
</S3Dropzone>

useS3FileUpload()

Props

host

URL the file will be hosted from, typically an S3 bucket, or Cloudfront url

initialFileName

The name of the already uploaded file (${host}/${initialFileName})

Returns

fileUrl

The URL of the uploaded file ${host}/${fileName}

fileName

The name of the uploaded file

startFileUpload(file)

Start uploading the file

checkS3Status

Status result of the checkS3 query

fileUploadStatus

Status result of the fileUpload mutation

isSuccess

Success status of the checkS3 query

checkS3Status.isSuccess

isLoading

Loading status of the checkS3 query, or the fileUpload mutation

checkS3Status.isLoading || fileUploadStatus.isLoading,

isError

Error status of the checkS3 query, or the fileUpload mutation

checkS3Status.isError || fileUploadStatus.isError,

isIdle

Idle status of the checkS3 query, and the fileUpload mutation

checkS3Status.isIdle && fileUploadStatus.isIdle

Usage

import {useS3FileUpload} from '@newfrontdoor/s3-file-upload';
import {useDropzone} from 'react-dropzone';

function FileUpload({
  host,
  uploadUrl,
}) {
  const {
    startFileUpload
  } = useS3FileUpload({
    host,
    uploadUrl
  });

  const {getRootProps, getInputProps} = useDropzone(
    {
      onDrop(acceptedFiles) {
        startFileUpload(acceptedFiles[0]);
      }
    }
  );
  
  return (
    <div {...getRootProps()}>
      <input {...getInputProps()} />
    </div>
  )
}