FileUpload
Zona de upload com arrastar-e-soltar, pré-visualização de arquivos e validação.
Demonstração
Single file
Multiple images, max 2MB
Props
| Prop | Tipo | Padrão | Descrição |
|---|---|---|---|
accept | string | — | Tipos de arquivo aceitos (ex: image/*) |
multiple | boolean | false | Permite selecionar múltiplos arquivos |
maxSize | number | — | Tamanho máximo do arquivo em bytes |
maxFiles | number | — | Número máximo de arquivos |
onFilesChange | (files: FileUploadFile[]) => void | — | Callback com lista atual de arquivos |
disabled | boolean | false | Desabilita a zona de upload |
label | string | 'Drop files here or click to upload' | Texto do label principal |
hint | string | — | Texto de dica (ex: tipos de arquivo) |
error | string | — | Mensagem de erro |
Uso
import { FileUpload, FileUploadFile } from '@ghiberti85/ui'
const [files, setFiles] = useState<FileUploadFile[]>([])
// Basic
<FileUpload onFilesChange={setFiles} />
// Images only, max 5MB
<FileUpload
accept="image/*"
multiple
maxSize={5_000_000}
maxFiles={10}
label="Upload images"
hint="PNG, JPG, GIF up to 5MB"
onFilesChange={setFiles}
/>
// Access file data
files.forEach(({ file, id, preview }) => {
console.log(file.name, file.size)
})