FileUpload

Form field used for handling file attachments including the 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>

Supports custom trigger element

Handles drag-and-drop interaction

Can be integrated with 3rd-party file upload libraries

Keyboard and screen-reader accessible

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 the previews of the uploaded files.


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

In case you want to use a separate trigger element inside FileUpload instead of making the whole component clickable – you can use FileUpload.Trigger. It will still keep the whole area work with drag events.


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

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


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