FileUpload
A file upload component allows users to select and upload files.
Props
FileUpload#
| Prop | Type | Default | Description |
|---|---|---|---|
| accept | string | Record<string, string[]> | The accept file types | |
| allowDrop | boolean | true | Whether to allow drag and drop in the dropzone element |
| capture | "user" | "environment" | The default camera to use when capturing media | |
| children | string | number | bigint | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | Promise<...> | ((props: FileUploadRenderContext) => ReactNode) | ||
| dir | "ltr" | "rtl" | ltr | The document's text/writing direction. |
| directory | boolean | Whether to accept directories, only works in webkit browsers | |
| getRootNode | () => Node | ShadowRoot | Document | A root node to correctly resolve document in custom environments. E.x.: Iframes, Electron. | |
| ids | Partial<{
root: string
dropzone: string
hiddenInput: string
trigger: string
label: string
item(id: string): string
itemName(id: string): string
itemSizeText(id: string): string
itemPreview(id: string): string
}> | The ids of the elements. Useful for composition. | |
| inputRef | type ONLY_FOR_FORMAT =
| ((instance: HTMLInputElement | null) => void | (() => VoidOrUndefinedOnly))
| RefObject<HTMLInputElement> | ||
| isDisabled | boolean | ||
| locale | string | en-US | The current locale. Based on the BCP 47 definition. |
| maxFiles | number | 1 | The maximum number of files |
| maxFileSize | number | Infinity | The maximum file size in bytes |
| minFileSize | number | 0 | The minimum file size in bytes |
| name | string | The name of the underlying file input | |
| onFileAccept | (details: FileAcceptDetails) => void | Function called when the file is accepted | |
| onFileChange | (details: FileChangeDetails) => void | Function called when the value changes, whether accepted or rejected | |
| onFileReject | (details: FileRejectDetails) => void | Function called when the file is rejected | |
| onFilesChange | (details: FileChangeDetails) => void | ||
| translations | IntlTranslations | The localized messages to use. | |
| validate | (file: File) => FileError[] | null | Function to validate a file |
FileUploadPreview#
| Prop | Type | Default | Description |
|---|---|---|---|
filerequired | File | ||
| align | ResponsiveValue<ObjectPosition<Length>> | How to align the image within its bounds. It maps to css `object-position` property. | |
| crossOrigin | "" | "anonymous" | "use-credentials" | The key used to set the crossOrigin on the HTMLImageElement into which the image will be loaded. This tells the browser to request cross-origin access when trying to download the image data. | |
| fallback | ReactElement<any, string | JSXElementConstructor<any>> | Fallback element to show if image is loading or image fails. | |
| fallbackSrc | string | Fallback image src to show if image is loading or image fails.
Note 🚨: We recommend you use a local image | |
| fallbackStrategy | FallbackStrategy | beforeLoadOrError | - beforeLoadOrError(default): loads the fallbackImage while loading the src - onError: loads the fallbackImage only if there is an error fetching the src |
| fit | ResponsiveValue<ObjectFit> | How the image to fit within its bounds. It maps to css `object-fit` property. | |
| htmlHeight | string | number | The native HTML height attribute to the passed to the img | |
| htmlWidth | string | number | The native HTML width attribute to the passed to the img | |
| ignoreFallback | boolean | false | If true, opt out of the fallbackSrc logic and use as img |
| loading | "eager" | "lazy" | ||
| onError | ReactEventHandler<HTMLImageElement> | A callback for when there was an error loading the image src | |
| onLoad | ReactEventHandler<HTMLImageElement> | A callback for when the image src has been loaded | |
| sizes | string | The image sizes attribute | |
| srcSet | string | The image srcset attribute |
FileUploadTrigger#
Supports all Button props.
FileUploadDropzone#
Supports all Box props.
Was this helpful?