Manipulando arquivos com File API - JavaScript
A File API permite que o JavaScript interaja com arquivos locais de forma segura e eficiente. Essa API fornece ferramentas poderosas para manipular arquivos no navegador, sendo amplamente utilizada em aplicações web modernas. Os principais componentes da File API incluem:
: Representa um arquivo individual, contendo informações como nome, tipo, tamanho e data da última modificação.File
: Representa uma coleção de objetosFileList
, frequentemente usada para lidar com múltiplos arquivos selecionados.File
: Representa dados binários como arquivos ou partes de arquivos.Blob
: Permite a leitura de objetos do tipo File ou Blob.FileReader
Métodos de Seleção de Arquivos
Existem duas abordagens principais para os usuários selecionarem arquivos em uma aplicação web:
Por meio de uma caixa de diálogo de seleção de arquivos.
Com a funcionalidade de arrastar e soltar arquivos.
Caixa de Diálogo de Seleção de Arquivos
A maneira mais comum de os usuários selecionarem arquivos é através do elemento HTML <input type="file" />
<input type="file" id="files" name="files[]" multiple />
Quando o usuário seleciona um ou mais arquivos, o evento change é disparado. Podemos associar um manipulador de eventos para processar os arquivos selecionados:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemplo File API</title>
</head>
<body>
<input type="file" id="files" name="files[]" multiple />
<div id="list"></div>
<script>
function printFiles(e) {
const files = e.target.files; // Obtém os arquivos selecionados
let output = "";
for (let i = 0; i < files.length; i++) {
const file = files[i];
console.log(file);
output += `<li>
<p><strong>${file.name}</strong></p>
<p>Type: ${file.type || "n/a"}</p>
<p>Size: ${file.size} bytes</p>
<p>Modified on: ${file.lastModifiedDate?.toLocaleDateString()}</p>
</li>`;
}
document.getElementById("list").innerHTML = `<ul>${output}</ul>`;
}
document.getElementById("files").addEventListener("change", printFiles);
</script>
</body>
</html>
Neste exemplo, o evento change
e.target.files
FileList
File
File
name
type
size
lastModifiedDate
<div id="list"></div>
Por exemplo, ao selecionar arquivos:
Name Date Modified Type Size flower.png 26/11/2024 17.03 PNG File 37 KB test.html 02/12/2024 22.19 Chrome HTML Do... File 2 KB
Obtemos o seguinte resultado:
Seleção com Drag and Drop
Outra abordagem intuitiva para os usuários é a funcionalidade de arrastar e soltar arquivos diretamente na página. Para implementar isso, definimos uma área de destino na página e associamos manipuladores de eventos para capturar os arquivos. Veja o exemplo:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>Exemplo Drag and Drop</title>
</head>
<body>
<div id="target" style="width:300px;padding: 15px; background-color: gray;">Arraste os arquivos aqui</div>
<div id="fileList"></div>
<script>
function printFiles(e) {
e.preventDefault();
const files = e.dataTransfer.files; // Obtém os arquivos arrastados
let output = "";
for (let i = 0; i < files.length; i++) {
const file = files[i];
console.log(file);
output += `<li>
<p><strong>${file.name}</strong></p>
<p>Type: ${file.type || "n/a"}</p>
<p>Size: ${file.size} bytes</p>
<p>Modified on: ${file.lastModifiedDate?.toLocaleDateString()}</p>
</li>`;
}
document.getElementById("fileList").innerHTML = `<ul>${output}</ul>`;
}
function handleDragOver(e) {
e.preventDefault();
e.dataTransfer.dropEffect = "copy";
}
const target = document.getElementById("target");
target.addEventListener("dragover", handleDragOver);
target.addEventListener("drop", printFiles);
</script>
</body>
</html>
Aqui, definimos uma área de destino (<div id="target">
: Previne o comportamento padrão do navegador e define o efeito de arrastar como "copiar".dragover
: Captura os arquivos soltos comdrop
, que retorna ume.dataTransfer.files
. Os detalhes dos arquivos são processados e exibidos em outro elemento.FileList