Upload

The Upload component allows users to upload a file manually or using drag and drop.

Basic usage

Drag & drop file(s) here
or import them from your computer

const Demo = () => {
  const [selectedFile, setSelectedFile] = useState<File>();

  return selectedFile ? (
    <FileCard
      title={selectedFile.name}
      mimeType={selectedFile.type}
      onDelete={() => setSelectedFile(undefined)}
    />
  ) : (
    <Upload
      content={
        <span>
          Drag & drop file(s) here <br />
          or <u>import them from your computer</u>
        </span>
      }
      activeDragContent="Upload file(s)"
      onUpload={async (filesToUpload) => {
        setSelectedFile(filesToUpload?.[0]);
      }}
    />
  );
};

Illustration

You can display an illustration instead of the default icon with the illustration prop.

Drag & drop file(s) here
or import them from your computer

<Upload
  illustration={<img src="/illustration.webp" alt="" />}
  {...otherProps}
/>

Accept specific file types

The accept prop is used to allow one or more unique file types.

Drag & drop file(s) here
or import them from your computer

<Upload accept="image/*" {...otherProps} />