Manipulando arquivos com File API em 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:

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" />. 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.

Documentação oficial:

W3C - File API