File Upload

Modern drop zone with drag-and-drop, file validation, and file list. Uses upload and file icons from the icon registry.

Demo

Basic

Vedhæft fil

PDF, JPG eller PNG. Maks 5MB.

Træk filer hertil eller klik for at vælge

Maks 5.0 MB · .pdf,.jpg,.jpeg,.png

Multiple

Dokumenter

Upload op til 10 filer

Træk filer hertil eller klik for at vælge

Maks 10.0 MB

Error

Bilag

Du skal vedhæfte mindst én fil

Træk filer hertil eller klik for at vælge

Disabled

Fil

Træk filer hertil eller klik for at vælge

Installation

<script setup>
import { GTFileUpload } from '@grundtone/vue';
</script>

In Nuxt, GTFileUpload is auto-imported.

Usage

Basic

<GTFileUpload
  label="Vedhæft fil"
  help-text="PDF, JPG eller PNG. Maks 5MB."
  accept=".pdf,.jpg,.jpeg,.png"
  :max-size="5 * 1024 * 1024"
/>

Multiple files

<GTFileUpload label="Dokumenter" multiple :max-size="10 * 1024 * 1024" />

Handle files

<GTFileUpload
  label="Bilag"
  @change="files => console.log(files)"
  @error="msg => toast.error(msg)"
/>

Props

Prop	Type	Default	Description
label	string	—	Visible label
helpText	string	—	Help text (formats, size)
errorText	string	—	Error message
accept	string	—	Accepted MIME types
maxSize	number	—	Max file size in bytes
multiple	boolean	false	Allow multiple files
disabled	boolean	false	Disabled state
required	boolean	false	Required field
id	string	auto	HTML id

Events

Event	Payload	Description
change	File[]	Files added or removed
error	string	Validation error message

Features

• Drag-and-drop with visual dragover state
• Click to select via hidden file input
• File validation — type and size checked before adding
• File list — shows name, size, remove button
• Icons — upload icon in drop zone, file icon per file

See File Upload (Design System) for full CSS reference.