FileUpload

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={console.log}>
  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={MicIcon} size={6} />
    Drop files to attach
  </View>
</FileUpload>

Use inline flag to render FileUpload as an inline-block element with width based on its content.

<FileUpload name="file" inline>
  <View padding={3}>Drop files to attach</View>
</FileUpload>

Use headless variant when you want to combine it with other components. FileUpload will provide the trigger element, so make sure your component is not focusable by itself. You can still use components lik Button and Link without passing a different onClock to them.

Instead of passing children as a react node, you can also use render props pattern here and receive the current status of the trigger. That will allow you to update the component styles when user drags a file over the trigger.

<FileUpload name="file" inline variant="headless">
  {(props) => <Button highlighted={props.highlighted}>Click to upload</Button>}
</FileUpload>