FileUpload

Basic usage

Upload supporting document

import { FileUploadField } from '@eekodigital/raster';

<FileUploadField label="Upload supporting document" name="document" />

With hint text

Upload supporting documentPDF, DOCX or XLSX. Max 10 MB.

<FileUploadField
  label="Upload supporting document"
  name="document"
  hint="PDF, DOCX or XLSX. Max 10 MB."
/>

With error

Upload supporting documentError: Select a file to upload

<FileUploadField
  label="Upload supporting document"
  name="document"
  error="Select a file to upload"
/>

Restricting file types and multiple selection

Use the native accept attribute to restrict file types, and multiple to allow more than one file at once.

Upload imagesJPG or PNG only.

<FileUploadField
  label="Upload images"
  name="images"
  hint="JPG or PNG only."
  accept="image/jpeg,image/png"
  multiple
/>

Props

Prop	Type	Default	Description
label	string	—	Visible label for the file input.
hint	string	—	Optional hint text below the label.
error	string	—	Validation error message.
…props	InputHTMLAttributes	—	All native <input type=“file”> attributes, including accept, multiple, disabled, and onChange.