Upload de arquivo Componentes

O que é

É o campo de anexar arquivo, só que bonito e fácil: em vez do botão cinza "Escolher arquivo" do navegador, aparece uma área tracejada onde a pessoa arrasta as fotos/documentos ou clica para escolher. As fotos escolhidas aparecem em miniatura, cada uma com um × para tirar. Você coloca sw-upload numa <div> e diz, em atributos, que tipo de arquivo aceita, quantos e de que tamanho.

O JavaScript do núcleo esconde o <input type="file"> de dentro da div (ou cria um, se não houver) e monta no lugar a área de arraste, a fila de miniaturas e a linha de erro. Arquivo de tipo fora do sw-upload-accept (escolhido ou arrastado), maior que o permitido, ou além da quantidade máxima, é recusado com uma mensagem em vermelho. Ele não envia nada para o servidor sozinho: ele guarda a lista e você pega com SW.Upload.getFiles() na hora de enviar.

Quando usar

• Formulário de contato / orçamento com anexo (planta, foto do problema, currículo).
• Painel admin: fotos do produto, galeria do imóvel, imagens do post.
• Cadastro: foto de perfil, documento, comprovante — um arquivo só.
• Área do cliente: mandar arquivos para aprovação (artes, contratos em PDF).

Comece aqui

1. 1

   Coloque o SWCore na página: CSS no <head> e JS no fim do <body>. O segundo CSS traz os ícones — sem ele o desenho da imagem no meio da área não aparece.

   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.css">
   <link rel="stylesheet" href="https://swcore.sanweb.com.br/dist/2.1.0/swcore.compl.min.css">
   
   <!-- fim do <body> -->
   <script src="https://swcore.sanweb.com.br/dist/2.1.0/swcore.min.js"></script>

2. 2

   Escreva a div com sw-upload e um <input type="file"> dentro. Arraste uma foto do seu computador para a área abaixo, ou clique nela.

   <div sw-upload sw-upload-accept="image/*">
     <input type="file">
   </div>

3. 3

   Na hora de enviar, pegue os arquivos com SW.Upload.getFiles() e mande com fetch.

   const zona = document.querySelector('[sw-upload]');
   const dados = new FormData();
   SW.Upload.getFiles(zona).forEach((arq) => dados.append('fotos[]', arq));
   await fetch('/enviar-fotos', { method: 'POST', body: dados });

Todas as variações

Cada quadro abaixo é o componente de verdade, rodando. O código embaixo é exatamente o que está no quadro: copie e cole.

Tabela de opções

Receitas prontas — usos reais

Situações que aparecem em quase todo site. Copie a que servir.

<form sw-frm id="orcamento">
  <div sw-fld>
    <label for="nome">Seu nome</label>
    <input sw-inp id="nome" name="nome">
  </div>
  <div sw-fld>
    <label>Fotos do ambiente (até 5)</label>
    <div sw-upload sw-upload-accept="image/*" sw-upload-max="5" sw-upload-size="5242880"
         sw-upload-txt="Arraste as fotos do cômodo ou <strong>clique aqui</strong>">
      <input type="file">
    </div>
  </div>
  <button type="submit" sw-btn="pri">Pedir orçamento</button>
</form>

<script>
  const form = document.getElementById('orcamento');
  form.addEventListener('submit', async (e) => {
    e.preventDefault();
    const dados = new FormData(form);
    SW.Upload.getFiles(form.querySelector('[sw-upload]'))
      .forEach((foto) => dados.append('fotos[]', foto));
    await fetch('/orcamento', { method: 'POST', body: dados });
  });
</script>

<div sw-fld>
  <label>Sua foto</label>
  <div sw-upload sw-upload-max="1" sw-upload-accept=".jpg,.jpeg,.png,.webp"
       sw-upload-size="2097152" sw-upload-txt="Escolha uma foto de rosto">
    <input type="file">
  </div>
</div>

<div sw-upload id="fotos-produto" sw-upload-accept="image/*" sw-upload-txt="Fotos do produto">
  <input type="file">
</div>
<p id="info">Nenhuma foto ainda.</p>

<script>
  const zona = document.getElementById('fotos-produto');
  const info = document.getElementById('info');
  function contar() {
    const total = SW.Upload.getFiles(zona).length;
    info.textContent = total ? total + ' foto(s) na fila.' : 'Nenhuma foto ainda.';
  }
  zona.addEventListener('sw:upload:add', contar);
  zona.addEventListener('sw:upload:remove', contar);
</script>

<div sw-upload sw-upload-accept=".pdf" sw-upload-max="3" sw-upload-size="10485760"
     sw-upload-txt="Solte aqui o contrato assinado <strong>(PDF)</strong>">
  <input type="file">
</div>

Eventos

API (JavaScript)

Precisa de quê

• swcore.min.css + swcore.min.js — a área, a fila e as regras.
• swcore.compl.min.css — o ícone de imagem no meio da área (sem ele, só o texto aparece).
• Um servidor que receba os arquivos (PHP, Node…). O componente só escolhe e mostra.

Cuidados — erros comuns

• Enviar o formulário do jeito comum e esperar que os arquivos vão juntos: arquivos arrastados não entram no <input>. Sempre monte o envio com SW.Upload.getFiles() + FormData, como na receita.
• Escrever o tamanho em MB (sw-upload-size="5"): o número é em bytes. 5 MB = 5242880.
• Confiar no sw-upload-accept como segurança: ele recusa na tela (também o arquivo arrastado), mas quem garante mesmo é o servidor. Confira o tipo lá também.
• Colocar o sw-upload direto no <input>: ele vai na div em volta.

O que ele não faz

• Não envia os arquivos, não mostra barra de progresso de envio e não redimensiona fotos — isso é com o seu código/servidor.
• Não tem função pública para limpar a fila; recarregar o formulário ou recriar a div resolve.
• Não mostra o tamanho nem o ícone do tipo de arquivo no quadrinho de documentos — só o nome.