useS3Upload API

The useS3Upload hook returns items needed to coordinate the upload.

const Component = () => {
  let {
  } = useS3Upload();

  // ...
Return valueDescription
FileInputA component that renders a hidden file input. It needs to be rendered on the page in order to coordinate file access.
openFileDialog()A function that opens the browser's select a file dialog. Once a file is selected the FileInput's onChange action will fire.
uploadToS3(file)A function that will upload a file from a file input to your S3 bucket. For details on options, see uploadToS3 options below.
filesAny array of files objects, see Files below.
resetFiles()A function that will remove all files from the files array.

The usePresignedUpload() hook has the same signature as useS3Upload hook. You can learn more about presigned uploads here.

uploadToS3 Options

The uploadToS3 can take options that allow you to customize the request send to your API route.

uploadToS3(file, {
  endpoint: {
    request: {
      url: "/api/next-s3-upload",
      body: {},
      headers: {}
endpoint.request.urlThe location of the Next S3 Upload API route. Defaults to /api/next-s3-upload.
endpoint.request.bodyAdditional data sent in the body payload.
endpoint.request.headersAdditional HTTP request headers.


The files array returned from useS3Upload() contains a list of files that are currently uploading or have already been uploaded. Each object in the list has the following structure.

fileThe JavaScript File Object of the uploaded file.
uploadedAn integer representing the total number of bytes that been uploaded so far.
sizeAn integer representing the total size of the file.
progressThe percentage (between 0 and 100) of the file that has been uploaded.
idA unique identifier for the file.