File Upload
Form field for uploading files.
---
import FileUpload from "@forms/file-upload/FileUpload.astro";
---
<FileUpload label="Upload File" name="file" />---
blocks:
_component: building-blocks/forms/file-upload
label: Upload File
name: file
---Overview
A form field that lets users upload one or more files. Supports labels, required validation, and accepted file type restrictions (e.g. .jpg, .png, .pdf).
Properties
label string
The label text for the file upload field.
name string
A unique name attribute for the file upload field.
required boolean | default: false
Whether the field is required.
accept string
Comma-separated list of accepted file types (eg. '.jpg,.png,.pdf').
multiple boolean | default: false
Whether multiple files can be selected.
Examples
Multiple
---
import FileUpload from "@forms/file-upload/FileUpload.astro";
---
<FileUpload label="Upload files" multiple name="files" />---
blocks:
_component: building-blocks/forms/file-upload
label: Upload files
name: files
multiple: true
---File types
---
import FileUpload from "@forms/file-upload/FileUpload.astro";
---
<FileUpload accept=".jpg,.jpeg,.png,.gif,.webp,.svg,.avif" label="Upload Image" name="image" />---
blocks:
_component: building-blocks/forms/file-upload
label: Upload Image
name: image
accept: .jpg,.jpeg,.png,.gif,.webp,.svg,.avif
---Required
---
import FileUpload from "@forms/file-upload/FileUpload.astro";
---
<FileUpload accept=".pdf,.doc,.docx" label="Upload Document" name="document" required />---
blocks:
_component: building-blocks/forms/file-upload
label: Upload Document
name: document
accept: .pdf,.doc,.docx
required: true
---