FileUpload

A form field used for handling file attachments, including drag-and-drop interaction.

Import

import { FileUpload } from "reshaped";
import type { FileUploadProps } from "reshaped";

Storybook

FileUpload stories


<View width="300px" maxWidth="100%">
  <FileUpload name="file">
    <View gap={2}>
      <Icon svg={IconMic} size={6} />
      <View.Item>
        Drop files to attach, or{" "}
        <FileUpload.Trigger>
          <Link variant="plain">browse</Link>
        </FileUpload.Trigger>
      </View.Item>
    </View>
  </FileUpload>
</View>

Usage

FileUpload renders an area for uploading files with a native HTML file input. It handles click and drag events and provides an onChange handler that lets you submit the form based on the uploaded file data and display previews of the uploaded files.


<FileUpload name="file" onChange={(args) => console.log("Files updated", args)}>
  Drop files to attach
</FileUpload>

If you want to use a separate trigger element inside FileUpload instead of making the whole component clickable, you can use FileUpload.Trigger. The entire area will still handle drag events.


<FileUpload name="file">
  Drop files to attach, or{" "}
  <FileUpload.Trigger>
    <Link variant="plain">browse</Link>
  </FileUpload.Trigger>
</FileUpload>

You can use the children property to create any composition your product needs. For example, you can add an icon in addition to rendering text.


<FileUpload name="file">
  <View gap={2}>
    <Icon svg={IconMic} size={6} />
    Drop files to attach
  </View>
</FileUpload>

Dropdown menu

Hotkey