FileUpload

The FileUpload component is responsible for creating a dropzone/upload button and configuration file selection options.

title

Title of the container.

description

An optional description for additional information such as the types and sizes of files allowed.

onFilesSelected

Emits an event when the user selects files. This package does not own the state of the files so it's the consumers responsibility to store them somewhere.

<FileUpload
  onFilesSelected={(newFiles) => {
    /* stores files somewhere */
  }}
/>

dropZone

By default, the container will contain a button that can be used to upload files.

When dropZone=true, the button will be replaced with a drop zone where users can drag/drop files or simply click on it to select files.

multiple

Allows the user to select/drop multiple files at a time when true and only a single file at a time when false.

Default value is true.

accept

Sets the type of files that can be selected. Multiple types can be accepted via a comma separated string.

See this link for acceptable types.

disabled

Prevents the user from adding files.

Files

The Files component can be used to render the list of files the user has selected.

orientation

Sets the orientation of the file as vertical or horizontal.

<Files orientation="vertical" />

Default value is horizontal.

File

Presents a single file to the user, along with some optional controls. The primitive should only be used inside Files.

name

The name of the file.

The name will be truncated after 27 characters.

onOpenClick

An optional prop intended to let the user view a file. When onOpenClick is provided, the name of the file becomes clickable.

Note: This component does not have opinions on how the file is retrieved and presented to the user, that is up to the consumer.

onRemoveClick

An optional prop intended to let the user remove a file. When onRemoveClick is provided, a cross icon button is displayed.

Edit in Playroom

<File name="someFile.png" onRemoveClick={() => alert('onRemoveClick')} />

Note: This component does not have opinions on how the file is maintained in state and removed, that is up to the consumer.

loading

An optional prop to show a loading indicator for a file.

Edit in Playroom

<File name="someFile.png" loading />

The onOpenClick and onRemoveClick props will not working while loading=true i.e the file will not be interactive.

Edit in Playroom

<File
  name="someFile.png"
  onOpenClick={() => alert('onOpenClick')}
  onRemoveClick={() => alert('onRemoveClick')}
  loading
/>

invalidMessage

An optional prop to display validation or upload errors to the user.

Edit in Playroom

<File
  name="someFile.png"
  invalidMessage="Invalid file"
  onRemoveClick={() => alert('onRemoveClick')}
/>

Receipes

Simple file upload with upload button

Edit in Playroom

const [files, setFiles] = useState([]);
return (
  <Stack gap="large">
    <FileUpload
      title="Add attachments"
      onFilesSelected={(newFiles) => {
        setFiles((files) => [...files, ...newFiles]);
      }}
    >
      <Files>
        {files.map((file, index) => {
          return (
            <File
              key={`${file.name}`}
              name={file.name}
              onRemoveClick={() => {
                setFiles((files) =>
                  files.filter((_, fileIndex) => fileIndex !== index)
                );
              }}
              onOpenClick={() => alert(file.name)}
            />
          );
        })}
      </Files>
    </FileUpload>
  </Stack>
);

Drop zone with file restrictions

Edit in Playroom

const [files, setFiles] = useState([]);
return (
  <Stack gap="large">
    <FileUpload
      title="Add attachments"
      description="Upload upto 2 PDFs, each PDF no larger than 1MB."
      onFilesSelected={(newFiles) => {
        const fileExceedsSizeLimit = newFiles.find(
          (file) => file.size > fileSizeInMegaBytes(1)
        );
        if (fileExceedsSizeLimit) {
          alert('Maximum file size of 1mb allowed');
          return;
        }
        setFiles((oldFiles) => {
          if (oldFiles.length + newFiles.length > 2) {
            alert('Cannot upload more thatn 2 files');
            return oldFiles;
          }
          return [...oldFiles, ...newFiles];
        });
      }}
      disabled={files.length === 2}
      accept="application/pdf"
      dropZone
    >
      <Files>
        {files.map((file, index) => {
          return (
            <File
              key={`${file.name}`}
              name={file.name}
              onRemoveClick={() => {
                setFiles((files) =>
                  files.filter((_, fileIndex) => fileIndex !== index)
                );
              }}
              onOpenClick={() => alert(file.name)}
            />
          );
        })}
      </Files>
    </FileUpload>
  </Stack>
);

View a list of files

Edit in Playroom

const [files, setFiles] = useState([
  {
    name: 'file_1.png',
  },
  {
    name: 'file_2.png',
  },
  {
    name: 'file_3.png',
  },
]);
return (
  <Stack gap="large">
    <Text weight="semibold">View files</Text>
    <Files>
      {files.map((file, index) => {
        return (
          <File
            key={`${file.name}`}
            name={file.name}
            onRemoveClick={() => {
              setFiles((files) =>
                files.filter((_, fileIndex) => fileIndex !== index)
              );
            }}
            onOpenClick={() => alert(file.name)}
          />
        );
      })}
    </Files>
  </Stack>
);

File Upload

title

description

onFilesSelected

dropZone

multiple

accept

disabled

Files

orientation

File

name

onOpenClick

onRemoveClick

loading

invalidMessage

Receipes

Simple file upload with upload button

Drop zone with file restrictions

View a list of files