File Field

A file input to upload multiple files, with ability to drag and drop files.

Docs API Reference

Component file-field-demo not found in registry.

Installation

Copy and paste the following code into your project:

Usage

import {
  FileField,
  FileFieldDropzone,
  FileFieldHiddenInput,
  FileFieldItem,
  FileFieldItemDeleteTrigger,
  FileFieldItemList,
  FileFieldItemName,
  FileFieldItemPreviewImage,
  FileFieldItemSize,
  FileFieldLabel,
  FileFieldTrigger,
} from "@components/ui/file-field"
<FileField>
  <FileFieldDropzone>
    <FileFieldLabel />
    <FileFieldTrigger />
  </FileFieldDropzone>
  <FileFieldHiddenInput />
  <FileFieldItemList>
    {() => (
      <FileFieldItem>
        <FileFieldItemPreviewImage />
        <FileFieldItemName />
        <FileFieldItemSize />
        <FileFieldItemDeleteTrigger />
      </FileFieldItem>
    )}
  </FileFieldItemList>
</FileField>
Dropdown MenuHover Card