import { FileUpload } from "reshaped";
import type { FileUploadProps } from "reshaped";
Supports custom trigger element
Handles drag-and-drop interaction
Can be integrated with 3rd-party file upload libraries
Keyboard and screen-reader accessible

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

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{" "}
    <Link variant="plain">browse</Link>

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