FileDropzone

When to use

FileDropzone is for taking one or more files in a form: a document, an image, an import file.

When not to use

• For the upload itself: FileDropzone picks and lists files; the app handles upload and progress.
• For many files: hundreds of files need a table and bulk actions.

Anatomy

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>
  );
}

1. Label: Names the file input.
2. Zone: Dashed border, icon, prompt and the “Choose files” button.
3. Description: Accepted types and the size limit.
4. Error: Why files were rejected.
5. List: Name, size and a Remove button.

Behaviour

• “Choose files” is a real button and opens the file chooser; on the keyboard, focus it and press Enter or Space. With a pointer, the whole zone is clickable too.
• When a file is dragged over, the border turns solid, the zone fills and leans in slightly; the icon moves up.
• Files outside accept, maxSize and maxFiles are not added; each gets a reason and onReject is called.
• The same file is not added twice.
• The number of added files and a removed file are announced through a status region.
• With fileStatus each file row shows its own state: a progress bar, “Uploaded” or an error message. The retry button calls onRetry with that file.
• When the uploads finish, the status region reads a summary: how many files were uploaded and how many failed.

Upload behaviour

The component never makes a network request; the app supplies the upload with onUpload(file, signal). With it, each accepted file starts uploading as soon as it is added, and each file gets its own AbortSignal. While a file uploads, its Remove button becomes “Cancel upload”: it aborts the signal and removes the row. When the promise resolves the row shows “Uploaded”; when it rejects the Error message is shown with the file, and retry calls onUpload again with a new signal. When fileStatus is set, the app’s state (such as a progress percentage) takes the place of the component’s own. Rejected files (type, size, count) never reach onUpload. Without onUpload the component only chooses and checks files, and the form submits them. Bulk payment files accept text/csv only and are checked by the server after upload; an upload never moves money.

Guidelines

• State accepted types and the size in the description; do not make users wait to be rejected.
• Touch devices have no dragging; the “Choose files” button opens the file chooser.
• While uploading, show progress next to the list and hold the submit button.

Content

Turkish	English
Dosyaları buraya sürükleyin ya da	Drag files here or
Dosya seçin	Choose files
Yüklemeyi iptal et: {name}	Cancel upload of {name}
Yüklenemedi	Upload failed
{done} / {total} dosya yüklendi	{done} of {total} files uploaded
Eklemek için bırakın	Drop to add
Kaldır: {name}	Remove {name}
{name}: bu dosya türü kabul edilmiyor	{name}: this file type is not accepted
{name}: dosya en fazla {size} olabilir	{name}: the file can be at most {size}
En fazla {count} dosya ekleyebilirsiniz	You can add at most {count} files

Related components

• Field: Label, description and error layout.