Use Multiple File Upload

A React hook for handling multiple file uploads with progress tracking and cancellation

Installation

npx shadcn@latest add "https://reusables.vercel.app/r/use-multiple-file-upload"

Usage

import { useMultipleFileUpload } from "@/hooks/use-multiple-file-upload"

For a complete implementation example, check out the Multiple Image Upload component.

const {
  uploadMultipleFiles,
  uploadProgress,
  isUploading,
  error,
  uploadResults,
} = useMultipleFileUpload({
  onSuccess: (urls) => console.log("Uploaded:", urls),
  onError: (error) => console.log("Error:", error),
})

Reference

Options

Prop	Type	Default
`onSuccess`	`(urls: string[]) => void`	-
`onError`	`(error: string) => void`	-

Return Values

Prop	Type	Default
`uploadMultipleFiles`	`(files: FileToUpload[]) => Promise<void>`	-
`uploadProgress`	`UploadProgress[]`	-
`uploadResults`	`UploadResult[]`	-
`isUploading`	`boolean`	-
`error`	`string \| null`	-
`cancelAllUploads`	`() => void`	-
`resetUploads`	`() => void`	-

Use Multiple File Upload

Installation

Usage

Reference

On this page