File Upload

React

Usage

import { FileUpload } from '@zalify-ui/react'

<FileUpload.Root>
  <FileUpload.HiddenInput />
  <FileUpload.Label />
  <FileUpload.Dropzone>
    <FileUpload.DropzoneContent />
  </FileUpload.Dropzone>
  <FileUpload.Trigger />
  <FileUpload.ItemGroup>
    <FileUpload.Item>
      <FileUpload.ItemPreview />
      <FileUpload.ItemFileName />
      <FileUpload.ItemSizeText />
      <FileUpload.ItemDeleteTrigger />
    </FileUpload.Item>
  </FileUpload.ItemGroup>
</FileUpload.Root>

Shortcuts

The FileUpload component also provides a set of shortcuts for common use cases.

FileUpload.Items

By default, the FileUpload.Items shortcut renders the list of uploaded files.

<FileUpload.ItemGroup>
  <FileUpload.Context>
    {({ acceptedFiles }) =>
      acceptedFiles.map((file) => (
        <FileUpload.Item key={file.name} file={file}>
          <FileUpload.ItemPreview />
          <FileUpload.ItemName />
          <FileUpload.ItemSizeText />
          <FileUpload.ItemDeleteTrigger />
        </FileUpload.Item>
      ))
    }
  </FileUpload.Context>
</FileUpload.ItemGroup>

This might be more concise if you don't need to customize the file upload items:

<FileUpload.ItemGroup>
  <FileUpload.Items />
</FileUpload.ItemGroup>

FileUpload.List

The FileUpload.List shortcut renders the list of uploaded files. It composes the FileUpload.ItemGroup and FileUpload.Items components.

<FileUpload.List />

is the same as:

<FileUpload.ItemGroup>
  <FileUpload.Items />
</FileUpload.ItemGroup>

Examples

Accepted Files

Specify the accepted file types for upload using the accept prop.

React

Multiple Files

Upload multiple files at once using the maxFiles prop.

React

Image Preview

Use the FileUpload.ItemPreviewImage component to render a preview of image files.

React

Media Capture

Use the capture prop to capture and upload media directly from the device camera or microphone.

Info

The capture prop is only supported on mobile devices.

React

Dropzone

Drop multiple files inside the dropzone. Use the maxFiles prop to limit the number of files that can be uploaded at once.

Drag and drop files here

.png, .jpg up to 5MB

React

Input

Use the FileInput component to create a trigger that looks like a text input.

Upload file

React

Props

Root

Prop	Default	Type
`size`	`'md'`	`'md'`
`allowDrop`	`true`	`boolean` Whether to allow drag and drop in the dropzone element
`locale`	`\en-US\`	`string` The current locale. Based on the BCP 47 definition.
`maxFiles`	`1`	`number` The maximum number of files
`maxFileSize`	`Infinity`	`number` The maximum file size in bytes
`minFileSize`	`0`	`number` The minimum file size in bytes
`preventDocumentDrop`	`true`	`boolean` Whether to prevent the drop event on the document
`accept`		`Record<string, string[]> \| FileMimeType \| FileMimeType[]` The accept file types
`acceptedFiles`		`File[]` The controlled accepted files
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`capture`		`'user' \| 'environment'` The default camera to use when capturing media
`defaultAcceptedFiles`		`File[]` The default accepted files when rendered. Use when you don't need to control the accepted files of the input.
`directory`		`boolean` Whether to accept directories, only works in webkit browsers
`disabled`		`boolean` Whether the file input is disabled
`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.
`invalid`		`boolean` Whether the file input is invalid
`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
`required`		`boolean` Whether the file input is required
`transformFiles`		`(files: File[]) => Promise<File[]>` Function to transform the accepted files to apply transformations
`translations`		`IntlTranslations` The localized messages to use.
`validate`		`(file: File, details: FileValidateDetails) => FileError[] \| null` Function to validate a file

Dropzone

Prop	Default	Type
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.
`disableClick`		`boolean` Whether to disable the click event on the dropzone

Item

Prop	Default	Type
`file`*		`File`
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

ItemPreview

Prop	Default	Type
`type`	`'.*'`	`string` The file type to match against. Matches all file types by default.
`asChild`		`boolean` Use the provided child element as the default rendered element, combining their props and behavior.

Usage

Shortcuts

FileUpload.Items

FileUpload.List

Examples

Accepted Files

Multiple Files

Image Preview

Directory

Media Capture

Dropzone

Input

Props

Root

Dropzone

Item

ItemPreview