UploadButton

The UploadButton component allows users to upload a file with a button.

Basic usage

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

  return selectedFile ? (
    <FileCard
      title={selectedFile.name}
      mimeType={selectedFile.type}
      onDelete={() => setSelectedFile(undefined)}
    />
  ) : (
    <UploadButton
      onUpload={async (filesToUpload) => {
        setSelectedFile(filesToUpload?.[0]);
      }}
      text="Add a document"
      variant="tertiaryNeutral"
    />
  );
};

Accept specific file types

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

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