Arraste e Solte Arquivos em Input HTML: Compatibilidade e Dicas
Resposta Rápida
Crie uma área de arrastar e soltar para seu elemento de upload de arquivos em HTML. Para fazer isso, utilize o rastreamento de eventos para dragover e drop em JavaScript. Veja uma maneira curta e clara de implementá-lo:
// Obtendo o elemento de input de arquivos e a área de despejo
var fileInput = document.getElementById('fileInput');
var dropArea = document.getElementById('dropArea');
// Manipulando o evento de passar o mouse por cima
dropArea.addEventListener('dragover', e => {
e.preventDefault();
dropArea.classList.toggle('active', true); // Destacar visualmente a área de despejo
});
// Manipulando o evento de despejo de arquivos
dropArea.addEventListener('drop', e => {
e.preventDefault();
dropArea.classList.toggle('active', false); // Remover destaque visual
fileInput.files = e.dataTransfer.files; // Atribuir os arquivos ao elemento de input
});Aqui está a marcação HTML com a área de arrastar e soltar e um elemento de input de arquivo oculto:
<div id="dropArea">Arraste os arquivos aqui.</div>
<input type="file" id="fileInput" hidden>Com essa abordagem, você pode direcionar os arquivos arrastados pelo usuário diretamente para o elemento de upload — isso é muito conveniente para o usuário.
Vamos Adicionar Usabilidade?
Não se esqueça de envolver o usuário incorporando transições CSS para efeitos de hover na área de arrastar e soltar. Use pseudo-classes, como :valid, para estilizar um campo de input válido. Além disso, forneça vários mecanismos de seleção de arquivos — por exemplo, botões ou elementos div que imitem cliques no input oculto.
Princípios Básicos
Considere o suporte para lidar com múltiplos arquivos. Certifique-se de que sua solução funcione corretamente em todos os navegadores populares — Chrome, Firefox, IE10+ e Safari. Diversifique os efeitos interativos. Em particular, deixe o elemento de input seguir o movimento do cursor, tornando a interface mais intuitiva.
A área de despejo deve estar preparada para limitar os uploads de arquivos à página ou a uma parte específica dela. Além disso, prepare o tratamento do lado do servidor para os uploads.
Equilíbrio e Controle
Verifique o suporte ao HTML5 nos navegadores e ofereça mecanismos alternativos para navegadores mais antigos ou que não suportem HTML5. Evite que usuários experientes enfrentem JavaScript desnecessário para uma interação mais rápida e eficiente.
Visualização
Vamos descrever o arquivo como um avião de papel (📄✈️) e imaginar que ele está indo em direção à caixa de correio do formulário HTML (📫):
Antes de arrastar:
📄✈️ ➡️️ 🚫📫
Durante o arrasto:
📄✈️ ✈️ ✈️ ➡️️ ✅📫
Após o arrasto:
🚪📫 (📄✈️ dentro)Ajude seu 📄✈️ a chegar em 📫 — e o upload será bem-sucedido!
**Elemento do Formulário:** [___📫___]
**Seu Arquivo:** 📄✈️
**Ação:** Arraste 📄✈️ sobre 📫
**Resultado:** Arquivo enviado com sucesso!Pense no Futuro: Acessibilidade e Design de UX
Crie uma área de arrastar e soltar visualmente compreensível. Utilize conteúdo descritivo e sinais visuais, além de adicionar explicações textuais para usuários com deficiências auditivas. Destaque o status ativo da área de despejo ao mover um arquivo.
Em Conclusão: Segurança e Desempenho
Não se esqueça da segurança da aplicação, filtre tipos de arquivos no lado do cliente e sanitize os arquivos enviados no servidor. Ao trabalhar com arquivos grandes, utilize um mecanismo de fragmentação para prevenir falhas e aumentar o desempenho.
Recursos Úteis
- API de Arrastar e Soltar HTML - Web APIs | MDN — documentação e exemplos sobre a API de Arrastar e Soltar HTML.
- Como Criar um Elemento HTML Arrastável — tutorial sobre como criar elementos HTML/CSS/JS arrastáveis.
- Ler arquivos em JavaScript | Artigos | web.dev — guia para leitura de arquivos em JavaScript, que é particularmente importante para arrastar e soltar arquivos.
- Upload de Arquivos por Arrastar e Soltar | CSS-Tricks — guia atualizado sobre como implementar o arrastar e soltar de arquivos para uploads.
- Padrão HTML — padrão oficial para o mecanismo de upload de arquivos em HTML.
- Entrada e manipulação de arquivos por arrastar e soltar — discussão no Stack Overflow com muitos exemplos e soluções.
- GitHub - mailru/FileAPI: FileAPI — um conjunto de ferramentas JavaScript para trabalhar com arquivos — biblioteca JavaScript para implementar múltiplos uploads de arquivos e funcionalidade de arrastar e soltar.