Skip to content

useUploader

The orchestrator hook. Manages file state, validation, the upload queue, and lifecycle callbacks.

ts
function useUploader<TResponse = unknown>(
  options: UploaderOptions<TResponse>,
): UploaderInstance<TResponse>

Options

OptionTypeDefaultDescription
adapterUploadAdapter<TResponse>requiredUpload function
acceptstring[]MIME types or extensions ('image/*', '.pdf')
maxFileSizenumberMax size in bytes
minFileSizenumberMin size in bytes
maxFilesnumberMax number of files (includes already added)
autoUploadbooleanfalseEnqueue as soon as files are added
concurrencynumber3Max parallel adapter calls
maxRetriesnumber0Automatic retries per file
retryDelaynumber1000Base delay in ms; exponential backoff
validatorFileValidatorCustom validation
onFileAdded(file) => voidFile accepted into state
onFileRemoved(file) => voidAfter removeFile
onUploadStart(file) => voidAdapter starting
onUploadProgress(file, percent) => voidProgress tick
onUploadSuccess(file, response) => voidAdapter resolved
onUploadError(file, error) => voidAdapter rejected after auto-retries
onAllComplete() => voidQueue drained

Returns

PropertyTypeDescription
filesUploadFile<TResponse>[]Current list
addFiles(files: File[]) => voidValidate and add
removeFile(id: string) => voidAbort if needed and remove
upload() => voidStart all pending files
retryFile(id: string) => voidRetry error / cancelled
retryAll() => voidRetry every retryable file
cancelFile(id: string) => voidAbort in-flight; status cancelled
cancelAll() => voidAbort all in-flight
clearCompleted() => voidDrop success files
clearAll() => voidCancel everything and empty the list
isUploadingbooleanAny file has status uploading
totalProgressnumberAverage progress 0–100
rejectionsFileRejection[]Last addFiles batch of rejects

Example

tsx
const uploader = useUploader<ApiResponse>({
  adapter,
  accept: ['image/*'],
  maxFileSize: 5 * 1024 * 1024,
  maxFiles: 10,
  autoUpload: true,
  concurrency: 2,
  maxRetries: 2,
  retryDelay: 1000,
  onUploadSuccess: (file, response) => {
    console.log(file.file.name, response.url);
  },
});

retryFile is a no-op unless status is error or cancelled. upload() only enqueues pending files.

See File lifecycle for status transitions and Adapters for the adapter contract.

Released under the MIT License.