Lendo o conteúdo de um arquivo via Javascript

Hoje vamos a uma dica rápida, muitas vezes precisamos ler o conteúdo de um arquivo via Javascript seja para processá-lo diretamente no front-end ou para enviá-lo através de alguma API. Fazer isso é muito simples basta utilizar o objeto FileReader.

Para um exemplo de como utilizar, primeiro vamos criar um campo input para o usuário escolher o arquivo. Adicionamos a ele um evento onChange para disparar quando o arquivo for selecionado, passando o objeto FileList que todo input file possui.

<input type="file" id="arquivo" onChange="handleFile(this.files)">

Agora criamos a função handleFile

function handleFile(files){
    const reader = new FileReader();
    reader.onload = (event) => {
        let data = event.target.result;
        document.querySelector("#texto").value = data; 
    };
    reader.readAsText(files[0]);
}

Na linha 2 criamos o objeto FileReader e na linha 3 adicionamos um evento de onload que será disparado quando a leitura do arquivo for concluída com sucesso. A função de evento recebe um objeto ProgessEvent que entre seus atributos possui o target que é o próprio objeto FileReader e este possui o atributo result que contem o conteúdo do arquivo lido.

No nosso exemplo, na linha 5, simplesmente jogamos o conteúdo do arquivo em um campo de formulário, no caso pode ser um textarea, mas poderiamos estar lendo um Json e bastaria utilizar um JSON.parse(event.target.result) para obtermos um objeto para utilizarmos.

Com o evento que irá tratar o resultado da leitura do arquivo pronto não podemos nos esquecer de chamar o método que irá realmente realizar a leitura, neste caso o readAsText recebendo o primeiro elemento do FileList do input, ou seja o arquivo selecionado no input.

O método readAsText inicia a leitura do arquivo como uma string de texto, ou seja, irá ler o arquivo como texto e colocar o resultado dentro do atributo result.

Caso estivermos lendo um arquivo binário como uma imagem podemos utilizar readAsBinaryString que irá ler em forma binária, sendo comum encodá-la em base64 através da função btoa.

if (['image/jpg', 'image/png'].includes(files[0].type)) {
    const reader = new FileReader();
    reader.onload = (event) => {
        let data = event.target.result;
        document.querySelector("#texto").value = btoa(data);
        document.querySelector("#imagem").src = 'data:'+files[0].type+';base64,'+btoa(data);
    };
    reader.readAsBinaryString(files[0]);
}

Este exemplo não é muito diferente do anterior, simplesmente começamos testando se o type do arquivo é um dos tipos de imagem que esperamos. Na linha 5 utilizamos a função btoa para encodar via base64 o conteúdo do arquivo para exibi-lo no campo textarea. Na linha 6 atribuímos para um elemento img uma imagem inline para exibi-la, para isso concatenamos o data em base64 com o devido “cabeçalho”. Lembrando que para inserir uma imagem inline devemos utilizar o formato data:[<mediatype>][;base64],<data>.

É claro não devemos nos esquecer de efetivamente disparar a leitura do arquivo através do método readAsBinaryString.

Aqui simplesmente exibimos a imagem lida, mas poderíamos facilmente enviar os dados para uma API por exemplo.

Veja o exemplo funcionando.

Outros eventos que podem ser úteis do FileReader são: