setFiles(Array.from(event.currentTarget.files ?? []))}
files={files.map((file, index) => ({
name: file.name,
onRemove: () =>
setFiles((current) =>
current.filter((_, itemIndex) => itemIndex !== index),
),
}))}
/>;
```
The File Upload component lets users attach a file, such as a supporting document
or a photo of an ID. The whole dropzone acts as the label, so clicking anywhere
inside it opens the file picker, and uploaded files stay visible in a list so
users can confirm what they attached.
## Usage
✓
When to use
- Use file upload only when a document is necessary to complete the service.
- Use it for evidence that cannot be entered, declared or verified another way.
×
When not to use
- Do not request optional documents “just in case”.
- Do not require a file format or size that creates unnecessary software, connectivity or data costs.
## Best practices
### Explain restrictions before users choose a file
State the accepted file types, maximum size and whether more than one file is
allowed in hint text. Use the `accept` attribute to narrow the system file
picker, but validate the file again on the server.
### Prefer one document per input
One clearly labelled input per document is easier to understand than a single
multi-file picker. Let users see what they selected, remove the wrong file and
reuse an upload within the same journey where it is safe to do so.
## Guidance
State the accepted file types and the maximum size up front, in the subtitle and
the `.govbb-file-upload__max-size` text: users should not have to guess and
fail. Keep uploaded files visible in the list (`.govbb-file-upload__list`) so
users can confirm what they attached, and give each one a _Remove_ action so
they can correct a mistake without starting over.
Pair the dropzone with a `.govbb-form-group`, a visible `.govbb-label` naming
what to upload, and a `.govbb-hint` giving an example, such as _"This could be a
recent utility bill or bank statement"_.
## Errors
When an upload fails or a file is rejected, set `aria-invalid="true"` on the
input and show an error message (`.govbb-error-message`) with `role="alert"`,
linked to the input with `aria-describedby`. Keep the message specific, such as
_"Select a file"_ or _"The file must be smaller than 25MB"_.
```html title="File upload with an error"
```
```tsx
import { FileUpload } from '@govtech-bb/react';
;
```