Skip to content
aq-ui
Back to HooksHook

Use File Upload

Open-code aq-ui React hook for Use File Upload.

Installation

pnpm dlx aq-ui@alpha add use-file-upload

API reference

Client module

Import the parts you need, then jump to an export for its contract.

View full source

Quick start

"use client"

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

const result = useFileUpload()

createFileUploadId

functionSource L72

Public function export from Use File Upload.

function createFileUploadId(file: File)

Parameters

NameType
fileFile

FileUploadControls

interfaceSource L45

Type contract for FileUploadControls.

interface FileUploadControls

Members

NameType
inputRef{ current: HTMLInputElement | null }
entriesFileUploadEntry[]
filesFile[]
rejectionsFileUploadRejection[]
isDraggingboolean
isUploadingboolean
addFiles(files: Iterable<File>) => FileUploadRejection[]
remove(id: string) => void
clear() => void
upload(id: string) => Promise<UploadedAsset | undefined>
uploadAll() => Promise<UploadedAsset[]>
retry(id: string) => Promise<UploadedAsset | undefined>
cancel(id: string) => void
cancelAll() => void
open() => void
inputPropsReact.InputHTMLAttributes<HTMLInputElement>
rootProps{ onDragEnter: React.DragEventHandler<HTMLElement> onDragOver: React.DragEventHandler<HTMLElement> onDragLeave: React.DragEventHandler<HTMLElement> onDrop: React.DragEventHandler<HTMLElement> }

FileUploadEntry

interfaceSource L15

Type contract for FileUploadEntry.

interface FileUploadEntry

Members

NameType
idstring
fileFile
progressnumber
statusFileUploadStatus
asset?UploadedAsset
error?string

FileUploadRejection

interfaceSource L24

Type contract for FileUploadRejection.

interface FileUploadRejection

Members

NameType
fileFile
reason"type" | "size" | "max-files" | "multiple"
messagestring

FileUploadStatus

typeSource L12

Type contract for FileUploadStatus.

type FileUploadStatus = "idle" | "uploading" | "complete" | "error" | "canceled"

useFileUpload

functionSource L103

Open-code aq-ui React hook for Use File Upload.

function useFileUpload({ value, defaultValue = EMPTY_FILES, onValueChange, uploadAdapter, autoUpload = true, accept, multiple = true, maxFiles = Number.POSITIVE_INFINITY, maxSize = Number.POSITIVE_INFINITY, disabled = false, onReject, onUploadComplete, }: UseFil…): FileUploadControls
Returns
FileUploadControls

Parameters

NameTypeDefault
options?UseFileUploadOptions{}
const result = useFileUpload()

UseFileUploadOptions

interfaceSource L30

Type contract for UseFileUploadOptions.

interface UseFileUploadOptions

Members

NameTypeDefault
value?File[]—
defaultValue?File[]EMPTY_FILES
onValueChange?(files: File[]) => void—
uploadAdapter?EditorAssetUploadAdapter—
autoUpload?booleantrue
accept?string | string[]—
multiple?booleantrue
maxFiles?numberNumber.POSITIVE_INFINITY
maxSize?numberNumber.POSITIVE_INFINITY
disabled?booleanfalse
onReject?(rejections: FileUploadRejection[]) => void—
onUploadComplete?(assets: UploadedAsset[]) => void—

Registry dependencies

upload, use-latest, use-stable-callback

Files

  • hooks/use-file-upload.ts

Source