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:

  • File: Representa um arquivo individual, contendo informações como nome, tipo, tamanho e data da última modificação.

  • FileList: Representa uma coleção de objetos File, frequentemente usada para lidar com múltiplos arquivos selecionados.

  • Blob: Representa dados binários como arquivos ou partes de arquivos.

  • FileReader: Permite a leitura de objetos do tipo File ou Blob.

Métodos de Seleção de Arquivos

Existem duas abordagens principais para os usuários selecionarem arquivos em uma aplicação web:

  1. Por meio de uma caixa de diálogo de seleção de arquivos.

  2. 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" />. Ele cria uma interface de seleção nativa do navegador para escolher arquivos do sistema local. Exemplo básico:

<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 detecta quando arquivos são selecionados. A propriedade e.target.files retorna uma instância de FileList, que funciona como um array contendo objetos File. Cada File possui informações como o nome (name), tipo MIME (type), tamanho em bytes (size) e data da última modificação (lastModifiedDate). Essas informações são processadas em um loop e exibidas no elemento <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:

Selecionado arquivos por meio de Caixa de Diálogo de Seleção de Arquivos - File API

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">) onde os usuários podem soltar arquivos. O comportamento é configurado com dois eventos principais:

  • dragover: Previne o comportamento padrão do navegador e define o efeito de arrastar como "copiar".

  • drop: Captura os arquivos soltos com e.dataTransfer.files, que retorna um FileList. Os detalhes dos arquivos são processados e exibidos em outro elemento.

Política de Privacidade

Copyright © www.programicio.com Todos os direitos reservados

É proibida a reprodução do conteúdo desta página sem autorização prévia do autor.

Contato: programicio@gmail.com