File Upload [sw-upload]

1. Variações

Arraste arquivos ou clique para selecionar. Preview automático para imagens, nome do arquivo para outros tipos.

2. Evento em Tempo Real

Cada arquivo adicionado ou removido dispara um evento no wrapper com os dados do arquivo.

const upl = document.querySelector('[sw-upload]');

upl.addEventListener('sw:upload:add', e => {
  const files = e.detail.files; // todos os arquivos no momento
  console.log('último adicionado:', files[files.length - 1].name);
});

upl.addEventListener('sw:upload:remove', e => {
  console.log('índice removido:', e.detail.index);
});

3. Envio via FormData

Use SW.Upload.getFiles(el) para recuperar os arquivos e montar um FormData para envio via fetch.

const upl = document.querySelector('[sw-upload]');

document.querySelector('#btn-enviar').addEventListener('click', () => {
  const files = SW.Upload.getFiles(upl);

  if (!files.length) {
    alert('Selecione ao menos um arquivo.');
    return;
  }

  const form = new FormData();
  files.forEach(f => form.append('files[]', f));

  fetch('/upload', { method: 'POST', body: form })
    .then(r => r.json())
    .then(data => console.log('Enviado:', data));
});