A drop zone and file picker with type and size limits, progress and a file list.
ReactNode |
| – |
The content of the component. |
disabled | boolean | false | Whether the component should ignore user interaction. |
files | FileItem[] | – | The files in the list. Use with |
labels | Partial<FileUploadLabels> | – | Replaces the built-in text — errors, statuses and announcements — for this instance. See |
maxFiles | number | 5 | The most files the list can hold. Files past the limit are left out and passed to |
maxSizeMB | number | 10 | The largest file size allowed, in megabytes. Larger files are added with an error. |
minSizeMB | number | – | The smallest file size allowed, in megabytes. Smaller files are added with an error. |
onFileRemove | ((id: string) => void) | – | Called with a file's id when it is removed from the list. |
onFilesAdded | ((files: File[]) => void) | – | Called with the files the user just picked or dropped, including ones marked with an error for their size or type. Start uploads from here. |
onFilesChange | ((files: FileItem[]) => void) | – | Called with the new list whenever files are added or removed. |
onFilesRejected | ((files: File[]) => void) | – | Called with the files left out because the list already holds |
preventDuplicates | boolean | false | Whether a file already in the list (same name, size and last-modified time) is added with an error instead of a second time. |
validate | ((file: File, files: FileItem[]) => string | null) | – | Checks each new file after the size and type checks. Return a message to add the file with that error, or nothing to accept it. |
Accepts render, plus every native <div> attribute.
Accepts every native <input> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <p> attribute.
Accepts render, plus every native <span> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <button> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native <span> attribute.
Accepts render, plus every native <span> attribute.
Accepts render, plus every native <div> attribute.
Accepts render, plus every native attribute of the element it renders.
Accepts render, plus every native <button> attribute.
Accepts render, plus every native <div> attribute.
