File Upload Field

File manager component that displays uploaded files from session state.

This component renders the list of files already in session state, allows the user to remove individual files, and enforces min/max file count constraints. On final form submission it calls persistFiles() to move files to permanent storage. It does not handle uploading — that is the responsibility of the page controller. See FileUploadPageController for the provided Defra implementation.

Preview

This component is progressively enhanced. File uploads work without JavaScript using standard form submission. With JavaScript enabled, users get real-time upload progress.

To see the full experience, view our demo form which includes most components.

No files uploaded

Uploaded files

0 files uploaded

With files uploaded

Uploaded files

2 files uploaded

annual-report.pdf: Uploaded; Remove annual-report.pdf
supporting-evidence.docx: Uploaded; Remove supporting-evidence.docx

JSON definition

{
  "type": "FileUploadField",
  "name": "fieldName",
  "title": "Question title",
  "hint": "",
  "shortDescription": "",
  "options": {},
  "schema": {}
}

Properties

Property	Type	Required	Description
`hint`	`string`	No	Hint text displayed below the field label to help the user answer the question.
`shortDescription`	`string`	No	A short description of the field used in the check-your-answers summary.

Options

Property	Type	Required	Description
`accept`	`string`	No	Comma-separated list of accepted MIME types (e.g. `'image/png,application/pdf'`).
`classes`	`string`	No	Additional CSS classes applied to the component.
`customValidationMessages`	`object`	No	A map of Joi error codes to custom error messages.
`instructionText`	`string`	No	Alternative text read by screen readers in place of the field title.
`optionalText`	`boolean`	No	When `true`, appends '(optional)' to the field label.
`required`	`boolean`	No	Whether the field must be filled in. Defaults to `true`.

Schema constraints

Property	Type	Description
`max`	`number`	Maximum value, character length, word count, or file count.
`min`	`number`	Minimum value, character length, word count, or file count.
`length`	`number`	Exact character length required.