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
name string
required string | default: false
accept string
multiple string | default: false
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
---