file-uploader · Casa Hacker DS

overview

01

↑

arraste arquivos ou clica pra escolher

máx 10MB · png, jpg, pdf

variantes

02

Multi-file

↑

arraste vários arquivos

aceita múltiplos

Single file

↑

enviar foto de perfil

jpg ou png · até 5MB

comportamentos

03

Click na zona abre o file picker
Drag-and-drop de arquivo(s) sobre a zona destaca borda
Drop registra os arquivos
Lista mostra nome, tamanho formatado (KB/MB) e botão remover
Remover é só visual — em produção precisa interagir com upload state

modifiers · api

04

prop	tipo	default	descrição
.file-uploader	class	—	zona drop
.file-list	class	—	lista de arquivos selecionados
.is-dragover	class	—	estado durante drag (auto)
accept	attr	—	filtro de tipos (image/*, .pdf)
multiple	attr	—	permite múltiplos

quando usar

05

use

Upload de avatar, documentos, attachments
Quando preview rápido ajuda (lista do que foi escolhido)
Quando drag-and-drop melhora UX (anexar email)

não use

Sem indicação de progress quando upload demora — adiciona .progress
Sem validação de tipo/tamanho
Sem feedback de erro quando falha

acessibilidade

06 · wcag aa

Zona com tabindex='0' pra ser focável
Input file sempre presente (mesmo escondido) — fallback total
role="button" implícito quando interativo
Lista de arquivos anunciada por SR (region com aria-live)
Botão remover com aria-label

código

07 · html

<div class="file-uploader" tabindex="0">
  <div class="uploader-icon">↑</div>
  <div class="uploader-text">arraste ou <strong>escolha</strong></div>
  <div class="uploader-hint">máx 10MB · png, jpg</div>
  <input type="file" multiple>
</div>
<ul class="file-list"></ul>