File Drop

Report an issue

FileDrop is a flexible wrapper component that accepts an onDrop prop. Once files are dropped in the container, onDrop is called with a list of File objects. Alternatively, file uploads can be triggered by simply clicking on the container

<FileDrop onDrop={(files) => console.log(files)} className="min-w-75">
  {({ isDragging }) => (
    <>
      <Icon is={Upload} />
      <Text size="lg" weight="bold">
        {isDragging ? 'Drop them here' : 'Add your photos'}
      </Text>
    </>
  )}
</FileDrop>

In case of nested components, isDragging and files can be accessed via useFileDrop hook.


  export const NestedComponent = () => {
    const { isDragging, files } = useFileDrop()

    if (files.length > 0) {
      return <FileListComponent />
    }

    return (
      <Text size="lg" weight="bold">
        {isDragging ? 'Drop them here' : 'Add your photos'}
      </Text>
    )
  }

API Reference

FileDrop

Prop	Type	Default	Required
`accept`	`string`	-	-
`multiple`	`boolean`	-	-
`onDrop`	`(files: File[]) => void`	-