FileDropzone

The example below loads live from Storybook; open it there to use the controls.

Live example, StorybookOpen in Storybook

Default

Drag files onto the zone or click it. accept, maxSize and multiple apply rules; rejected files get a message.

Documents

Drag files here or

Choose files

PDF or image, up to 2 MB each.

LightDark

Copy code

import { FileDropzone, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <FileDropzone label="Documents" description="PDF or image, up to 2 MB each." accept="application/pdf,image/*" maxSize={2_000_000} multiple className="max-w-md" />
    </Provider>
  );
}

Single file

Without multiple, a new file replaces the old one.

Profile photo

Drag files here or

Choose files

PNG or JPG, up to 1 MB.

LightDark

Copy code

import { FileDropzone, Provider } from '@bigbang/ui';

export default function Single() {
  return (
    <Provider locale="en-GB">
      <FileDropzone label="Profile photo" description="PNG or JPG, up to 1 MB." accept="image/png,image/jpeg" maxSize={1_000_000} className="max-w-md" />
    </Provider>
  );
}

States

Required with an error, disabled.

Documents* required

Drag files here or

Choose files

Add at least one document.

Documents

Drag files here or

Choose files

PDF or image, up to 2 MB each.

LightDark

Copy code

import { FileDropzone, Provider } from '@bigbang/ui';

export default function States() {
  return (
    <Provider locale="en-GB">
      <div className="flex max-w-md flex-col gap-xl">
        <FileDropzone label="Documents" error="Add at least one document." required />
        <FileDropzone label="Documents" description="PDF or image, up to 2 MB each." disabled />
      </div>
    </Provider>
  );
}

Upload state

fileStatus returns the upload state of each file: uploading (a progress bar from progress), done (a check mark) or error (a message). With onRetry, a retry button appears next to a failed file.

Live example, StorybookOpen in Storybook

Light and dark mode

While dragging, the zone takes the primary border and the selected surface.

Light

Documents

Drag files here or

Choose files

PDF or image, up to 2 MB each.

Dark

Documents

Drag files here or

Choose files

PDF or image, up to 2 MB each.

Copy code

import { FileDropzone, Provider } from '@bigbang/ui';

export default function Default() {
  return (
    <Provider locale="en-GB">
      <FileDropzone label="Documents" description="PDF or image, up to 2 MB each." accept="application/pdf,image/*" maxSize={2_000_000} multiple className="max-w-md" />
    </Provider>
  );
}