A file upload component allows users to select and upload files.



acceptstring | Record<string, string[]>The accept file types
allowDropbooleanWhether to allow drag and drop in the dropzone element
childrentype ONLY_FOR_FORMAT = | string | number | boolean | ReactElement<any, string | JSXElementConstructor<any>> | Iterable<ReactNode> | ReactPortal | PromiseLikeOfReactNode | ((props: FileUploadRenderContext) => ReactNode)
dir"ltr" | "rtl"ltrThe document's text/writing direction.
filesFile[]The current value of the file input
getRootNode() => Node | ShadowRoot | DocumentA root node to correctly resolve document in custom environments. E.x.: Iframes, Electron.
idsPartial<{ 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.
inputReftype ONLY_FOR_FORMAT = | ((instance: HTMLInputElement | null) => void) | RefObject<HTMLInputElement>
localestringen-USThe current locale. Based on the BCP 47 definition.
maxFilesnumberThe maximum number of files
maxFileSizenumberThe maximum file size in bytes
minFileSizenumberThe minimum file size in bytes
namestringThe name of the underlying file input
onFileAccept(details: FileAcceptDetails) => voidFunction called when the file is accepted
onFileReject(details: FileRejectDetails) => voidFunction called when the file is rejected
onFilesChange(details: FileChangeDetails) => voidFunction called when the value changes, whether accepted or rejected
translationsIntlTranslationsThe localized messages to use.
validate(file: File) => FileError[] | nullFunction to validate a file


alignResponsiveValue<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.
fallbackReactElement<any, string | JSXElementConstructor<any>>Fallback element to show if image is loading or image fails.
fallbackSrcstringFallback image src to show if image is loading or image fails. Note 🚨: We recommend you use a local image
fallbackStrategyFallbackStrategybeforeLoadOrError- beforeLoadOrError(default): loads the fallbackImage while loading the src - onError: loads the fallbackImage only if there is an error fetching the src
fetchPriority"high" | "low" | "auto"
fitResponsiveValue<ObjectFit>How the image to fit within its bounds. It maps to css `object-fit` property.
htmlHeightstring | numberThe native HTML height attribute to the passed to the img
htmlWidthstring | numberThe native HTML width attribute to the passed to the img
ignoreFallbackbooleanfalseIf true, opt out of the fallbackSrc logic and use as img
loading"eager" | "lazy"
onErrorReactEventHandler<HTMLImageElement>A callback for when there was an error loading the image src
onLoadReactEventHandler<HTMLImageElement>A callback for when the image src has been loaded
sizesstringThe image sizes attribute
srcSetstringThe image srcset attribute


Supports all Button props.


Supports all Box props.

Was this helpful?