Forms

FileUpload

Componente upload file con selezione tramite click o drag-and-drop, validazione dimensione e tipo, preview immagini e gestione lista file selezionati.

Import

import { FileUpload } from '@pzeta/vue-components'

Il componente gestisce solo la selezione lato client. Il caricamento effettivo verso il server va implementato nell'handler dell'evento select. La validazione del tipo MIME lato server e sempre necessaria.

Props

Prop	Tipo	Default	Descrizione
`label`	`string`	—	Label del componente
`accept`	`string`	—	Tipi MIME accettati (es. `"image/*"`, `".pdf,.doc"`) — solo validazione client-side
`multiple`	`boolean`	`false`	Permette selezione di piu file
`maxFileSize`	`number`	—	Dimensione massima per file in bytes. Mostrata in unità SI a base 1000: `5000000` è «5 MB» (fino alla 1.23 le unità erano KiB/MiB, «4,8 MiB»)
`maxFiles`	`number`	—	Numero massimo di file selezionabili
`disabled`	`boolean`	`false`	Disabilita il componente
`invalid`	`boolean`	`false`	Forza stato errore
`required`	`boolean`	`false`	Campo obbligatorio
`showPreview`	`boolean`	`false`	Mostra anteprima per file immagine
`dragDrop`	`boolean`	`false`	Abilita area drag-and-drop
`showInstructions`	`boolean`	`true`	Mostra nell'area di rilascio il limite di dimensione e i tipi accettati; da spegnere se il modulo li indica già con un testo proprio, che comparirebbe due volte (dalla 1.24.0)
`loading`	`boolean`	`false`	Mostra indicatore di caricamento
`loadingIcon`	`string`	config	Classe icona loading spinner
`helperText`	`string \| null`	`null`	Testo di aiuto
`error`	`string \| null`	`null`	Messaggio di errore
`inputId`	`string`	—	ID dell'elemento input file
`name`	`string`	—	Nome del campo per form submission
`class`	`string`	`''`	Classe CSS aggiuntiva

Emits

Evento	Payload	Descrizione
`select`	`FileUploadSelectEvent`	File selezionati (click o drop)
`remove`	`FileUploadRemoveEvent`	File rimosso dalla lista
`clear`	—	Tutti i file rimossi

Tipi Correlati

interface FileUploadFile extends File {
  objectURL?: string  // URL temporaneo per preview
}

interface FileUploadSelectEvent {
  originalEvent: Event
  files: FileUploadFile[]
}

interface FileUploadRemoveEvent {
  file: FileUploadFile
  index: number
  files: FileUploadFile[]  // file rimanenti dopo la rimozione
}

Esempi

Upload multiplo con limite dimensione

Drag and drop con preview immagini

Integrazione con upload server

Solo stati (disabled/loading/errore)

Sicurezza

La validazione accept e maxFileSize e solo client-side e puo essere aggirata. Validare sempre tipo MIME e dimensione lato server prima di processare i file.

Accessibilita

Il pulsante di selezione apre il file picker nativo del browser
L'area drag-drop ha gli handler corretti per dragover/drop
Il pulsante di rimozione singolo file e accessibile da tastiera

TypeScript

import type {
  FileUploadProps,
  FileUploadFile,
  FileUploadSelectEvent,
  FileUploadRemoveEvent,
} from '@pzeta/vue-components'

function onSelect(event: FileUploadSelectEvent) {
  for (const file of event.files) {
    console.log(file.name, file.size, file.objectURL)
  }
}

function onRemove(event: FileUploadRemoveEvent) {
  console.log('Rimosso:', event.file.name, 'Rimasti:', event.files.length)
}

DateTimePicker

Input combinato data e ora con popup che integra un Calendar e un Clock compatto. Il valore e sempre in formato ISO 8601 YYYY-MM-DDTHH:MM.

FloatLabel

Wrapper che trasforma una label statica in una label fluttuante che si anima sopra l'input al focus o quando il campo ha un valore. Supporta tre varianti di posizionamento.