File API in JavaScript - accessing content

04-09-2023 - 👤 Andrés Cruz

Poder acessar o conteúdo dos arquivos carregados em uma página web, ou o que é o mesmo, permitir a leitura dos arquivos carregados no aplicativo web através de uma API JavaScript nativa abre uma enorme quantidade de possibilidades para a criação de aplicativos web para gerenciamento e edição de arquivos.

Arquivos de texto simples podem ser carregados para editar o texto que o compõe, validar o conteúdo, mostrar visualizações, etc. e tudo isso do lado do cliente sem a necessidade de se conectar a outro servidor.

Anteriormente explicamos as diferentes propriedades que existem na API de arquivos em JavaScript para obter dados de arquivos; agora iremos um pouco mais longe para chegar à sua abertura para uma leitura posterior dos arquivos carregados por meio de input type="file" ou outros métodos como Arrastar e Soltar.

1.0 Verificando a compatibilidade do navegador

Em primeiro lugar, e como qualquer nova tecnologia, recomenda-se verificar se o navegador suporta a utilização da API; A interface File deve ser referenciada em vez da interface FileList, que fornece dados de arquivo somente leitura, como seu nome e, mais importante, seu conteúdo.

Para verificar a compatibilidade podemos usar o seguinte código JavaScript:

se (!(janela.Arquivo)) { console.registro('A API Arquivo não éá soportada'); retornar; }

Suporte garantido da API de arquivo (window.File) pelo navegador, agora é possível utilizar os diferentes métodos e propriedades que a API de arquivo possui para lê-lo.

2.0 Obtendo arquivos de usuário

O método mais comum de obter arquivos pelo usuário é por meio da tag input type="file"; embora qualquer API que retorne a lista de arquivos funcione e o conteúdo deles seja acessado com a API de arquivo, como no experimento de arrastar e soltar que vimos anteriormente.

É possível obter várias informações sobre a lista de arquivos que foram carregados no momento (suporta o atributo múltiplos).

3.0 a interface FileReader para leitura de arquivos

Esta interface nos fornece métodos para ler arquivos como:

FileReader.readAsBinaryString(Blob|File): O arquivo ou blob deve ser especificado, a propriedade result conterá os dados do objeto file/BLOB na forma de uma string binária. Cada byte é representado por um número inteiro entre 0 e 0,255, inclusive.
FileReader.readAsText(Blob|File, [opt_encoding]): Você deve especificar o arquivo ou blob e, opcionalmente, a codificação que é UTF-8 por padrão; o arquivo deve ser texto simples.
FileReader.readAsDataURL(Blob|File): O arquivo ou blob deve ser especificado e o conteúdo deve ser codificado em base64.

Todos esses métodos têm em comum a passagem do arquivo como parâmetros para poder acessar seu conteúdo, uma vez que seu conteúdo é acessado e o conteúdo é lido, o evento loadend é acionado.

Embora para os exemplos apresentados (que são considerados texto simples) seria útil usar qualquer um dos métodos vistos acima, embora alguns retornem o MIME, entre outras coisas.

Se quiser mais informações, não hesite em consultar o MDN: FileReader.

3.1 Eventos da interface do FileReader

O evento loadend é disparado após a leitura do arquivo ser bem-sucedida e a partir daqui você pode acessar o conteúdo do arquivo e fazer algo com ele.

Lendo arquivos capturados usando um tipo de entrada="file"

O uso mais básico ou comum que podemos pensar é capturar o arquivo selecionado por um tipo de entrada="arquivo" e exibir seu conteúdo:

            var MAX_BYTES = 102400; // 100 KB

            função informações de arquivos(evento) { se (!(janela.Arquivo)) { console.registro('La API File no está soportada'); retornar; } var arquivo; var leitor; var arquivos = documento.obterElementoPorId('arquivos').arquivos;

                para (var eu = 0; i < arquivos.comprimento; i++) { arquivo = arquivos[i]; leitor = novo Leitor de arquivos(); leitor.fim de carregamento = onFileLoaded; leitor.readAsBinaryString(arquivo); } } função onFileLoaded(evento) { documento.obterElementoPorId("resultado").HTML interno = evento.alvo atual.resultado.substr(0, MAX_BYTES); }

Vemos que a estrutura é semelhante às vistas no post anterior: exceto que agora usamos o método FileReader para ler os arquivos e a chamada subsequente do evento onloadend quando a leitura termina; finalmente o experimento:

Exemplo Baixar

Lendo arquivos capturados usando arrastar e soltar

O último exemplo consiste em adaptar o experimento visto anteriormente com o Drag and Drop usando todos os eventos do Drag and Drop até a captura do arquivo no evento drop():

     var MAX_BYTES = 102400; // 100 KB

                função dragador(evento) {evento.stopPropagation(); evento.preventDefault(); } função dragagem(evento) {evento.stopPropagation(); evento.preventDefault(); } função derrubar(evento) { console.registro('soltar', evento); evento.stopPropagation(); evento.preventDefault(); var dados = evento.dataTransfer; var arquivos = dados.arquivos; var arquivo; var leitor; for (var eu = 0; i < arquivos.length; i++) { arquivo = arquivos[i]; leitor = new FileReader(); leitor.onloadend = onFileLoaded; leitor.readAsText(arquivo); } } function onFileLoaded(event) { documento.getElementById("resultado").valor = evento.currentTarget.result.substr(0, MAX_BYTES); } var contenedor = document.getElementById("contenedor"); contenedor.addEventListener("dragenter", dragenter, false); contenedor.addEventListener("dragover", arrastover, false); contenedor.addEventListener("drop", cair, false);

Example Download