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'

Esempio Base

<script setup lang="ts">
import { FileUpload } from '@pzeta/vue-components'
import type { FileUploadSelectEvent } from '@pzeta/vue-components'

function onSelect(event: FileUploadSelectEvent) {
  console.log('File selezionati:', event.files)
}
</script>

<template>
  <FileUpload label="Carica file" accept="*" @select="onSelect" />
</template>

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
`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
`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

<script setup lang="ts">
import type { FileUploadSelectEvent } from '@pzeta/vue-components'

const loading = ref(false)
const error = ref<string | null>(null)

async function handleSelect(event: FileUploadSelectEvent) {
  loading.value = true
  error.value = null

  try {
    const formData = new FormData()
    for (const file of event.files) {
      formData.append('files', file)
    }
    await fetch('/api/upload', { method: 'POST', body: formData })
  } catch (e) {
    error.value = 'Errore durante il caricamento'
  } finally {
    loading.value = false
  }
}
</script>

<template>
  <FileUpload
    label="Upload"
    accept="*"
    multiple
    :loading="loading"
    :error="error"
    @select="handleSelect"
  />
</template>

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.