FileUpload

A component that allows users to select one or more files from their device.

Usage

The component provides a way for users to select files. It supports single or multiple file selection, and can be used with a standard trigger or a dropzone.

import { FileUpload } from "@elemnts-ui/react";

<FileUpload.Root>
  <FileUpload.Label>Upload File</FileUpload.Label>
  <FileUpload.Trigger />
  <FileUpload.ItemGroup>
    <FileUpload.Context>
      {({ acceptedFiles }) =>
        acceptedFiles.map((file, id) => (
          <FileUpload.Item key={id} file={file} />
        ))
      }
    </FileUpload.Context>
  </FileUpload.ItemGroup>
  <FileUpload.HiddenInput />
</FileUpload.Root>;

Dropzone

Use the FileUploadDropzone component to create a drag and drop area for file uploads.

API Reference

FileUploadRoot

The root component for the file upload.

Prop	Type	Default
accept	`Record<string, string[]> \| FileMimeType \| FileMimeType[]`	-
acceptedFiles	`File[]`	-
allowDrop	`boolean`	`true`
asChild	`boolean`	`false`
capture	`'user' \| 'environment'`	-
defaultAcceptedFiles	`File[]`	-
directory	`boolean`	-
disabled	`boolean`	-
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; itemDeleteTrigger: (id: string) => string }>`	-
invalid	`boolean`	-
locale	`string`	`"en-US"`
maxFiles	`number`	`1`
maxFileSize	`number`	`Infinity`
minFileSize	`number`	`0`
name	`string`	-
onFileAccept	`(details: FileAcceptDetails) => void`	-
onFileChange	`(details: FileChangeDetails) => void`	-
onFileReject	`(details: FileRejectDetails) => void`	-
preventDocumentDrop	`boolean`	`true`
readOnly	`boolean`	-
required	`boolean`	-
transformFiles	`(files: File[]) => Promise<File[]>`	-
translations	`IntlTranslations`	-
validate	`(file: File, details: FileValidateDetails) => FileError[] \| null`	-

FileUploadRootProvider

Provides the file upload state returned by useFileUpload.

Prop	Type	Default
value	`UseFileUploadReturn`	required
asChild	`boolean`	`false`

FileUploadClearTrigger

Clears all accepted files.

Prop	Type	Default
asChild	`boolean`	`false`

FileUploadDropzone

The dropzone component for the file upload.

Prop	Type	Default
asChild	`boolean`	`false`
disableClick	`boolean`	-

FileUploadHiddenInput

The hidden native file input.

Prop	Type	Default
asChild	`boolean`	`false`

FileUploadItem

Renders an accepted file.

Prop	Type	Default
file	`File`	required
asChild	`boolean`	`false`

FileUploadItemDeleteTrigger

Removes the associated file from the accepted files.

Prop	Type	Default
asChild	`boolean`	`false`

FileUploadItemGroup

Groups file upload items.

Prop	Type	Default
asChild	`boolean`	`false`
type	`ItemType`	-

FileUploadItemName

Displays the associated file name.

Prop	Type	Default
asChild	`boolean`	`false`

FileUploadItemPreview

Displays a preview for the associated file.

Prop	Type	Default
asChild	`boolean`	`false`
type	`string`	`.*`

FileUploadItemPreviewImage

Displays an image preview for the associated file.

Prop	Type	Default
asChild	`boolean`	`false`

FileUploadItemSizeText

Displays the associated file size.

Prop	Type	Default
asChild	`boolean`	`false`

FileUploadLabel

The label for the file upload.

Prop	Type	Default
asChild	`boolean`	`false`

FileUploadTrigger

Opens the file picker.

Prop	Type	Default
asChild	`boolean`	`false`