Neste artigo, exploraremos como lidar com arquivos de maneira simples no JavaScript. Vamos focar nos tipos de arquivos: JSON, imagens e PDF. No entanto, o código que vamos desenvolver pode ser facilmente adaptado para outros tipos de arquivos.
Este conteúdo também está disponível em formato de vídeo no YouTube. Se preferir assistir ao vídeo, clique aqui.
Para facilitar, se preferir você pode baixar os dois arquivos que usei para esse artigo: um arquivo JSON aqui e uma imagem aqui.
Antes de mergulharmos no código JavaScript, é importante ter um elemento HTML que permita a seleção de arquivos. Para isso, precisamos criar um elemento de input do tipo file. Vamos capturar quando o conteúdo deste input for alterado para que possamos lê-lo através do JavaScript.
Aqui está um exemplo de um arquivo HTML básico:
<!DOCTYPE html>
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<title>Trabalhando com Arquivos</title>
</head>
<body>
<label for="input-arquivo">Selecionar arquivo</label>
<input type="file" id="input-arquivo">
<br><br>
<div id="preview"></div>
<script src="index.js"></script>
</body>
</html>
Neste código HTML, temos um input com o id input-arquivo e uma div com o id preview. Agora, vamos capturar esses elementos no JavaScript para trabalharmos com eles.
const inputArquivo = document.querySelector('#input-arquivo');
const preview = document.querySelector('#preview');
/*
* escuta o evento de change para quando o arquivo
* for selecionado executar a função lerArquivo
*/
inputArquivo.addEventListener('change', lerArquivo);
function lerArquivo() {
// captura apenas o primeiro arquivo selecionado
const arquivo = this.files[0];
// cria o objeto para ler o arquivo
const fReader = new FileReader();
/*
* quando o arquivo estiver sido totalmente lido/carregado.
* atribuí o resultado ao elemento preview
*/
fReader.addEventListener('load', function() {
preview.innerHTML = fReader.result;
});
if(arquivo) {
// lê o arquivo como texto puro
fReader.readAsText(arquivo);
}
}
No código acima, capturamos o elemento de input e a div para visualização. Quando o arquivo é alterado, chamamos a função lerArquivo. Essa função lê o conteúdo do arquivo selecionado e o exibe na div preview.
Para possibilitar o download de conteúdo, podemos criar a seguinte função:
function download(conteudo, nomeArquivo) {
/*
* cria o elemento <a> e atribuí ao documento
* com o display none, para não ser exibido
*/
const a = document.createElement('a');
a.style = 'display: none';
document.body.appendChild(a);
/*
* cria um objeto do tipo Blob
* e uma URL com os dados brutos no arquivo
*/
const blob = new Blob([conteudo], { type: 'octet/stream' });
const url = window.URL.createObjectURL(blob);
/*
* atribuí a URL a tag <a>
* define também o atributo download
* e dispara evento de clique
* após isso o download do arquivo é iniciado
*/
a.href = url;
a.download = nomeArquivo;
a.click();
/*
* por fim, eliminamos a url e removemos a tag <a> do DOM
*/
window.URL.revokeObjectURL(url);
a.remove();
}
Um objeto do tipo Blob (Binary Large Object) é usado para representar dados brutos, geralmente grandes, como por exemplo arquivos.
O código anterior é eficaz para arquivos de texto, mas e se quisermos ler uma imagem? Vamos adaptar o código para essa finalidade.
function lerArquivo() {
const arquivo = this.files[0];
const fReader = new FileReader();
fReader.addEventListener('load', function() {
/*
* criar um objeto que representa a imagem
* definindo os atributos height, title e src
*/
const img = new Image();
img.height = 100;
img.title = arquivo.name;
img.src = fReader.result;
preview.appendChild(img);
});
if(arquivo) {
/*
* lê o arquivo como um objeto Blob
* e gera uma representação dos dados
* no formato data URL
*/
fReader.readAsDataURL(arquivo);
}
}
No código acima, fizemos algumas modificações para permitir a leitura de imagens. Quando um arquivo de imagem é selecionado, a função lerArquivo cria um elemento de imagem e o exibe na div preview.
Para fazer o download de imagens, podemos modificar a função de download para se adequar ao conteúdo da imagem:
function download(conteudo, nomeArquivo) {
const a = document.createElement('a');
a.style = 'display: none';
/*
* a variável conteúdo está recebendo o img.src
* que é a url no formato de dados da imagem
*/
a.href = conteudo;
a.download = nomeArquivo;
document.body.appendChild(a);
a.click();
a.remove();
}
Caso necessário precisarmos ler um arquivo PDF e criar um preview, podemos fazer isso de algumas formas diferentes.
A primeira delas é adicionando os dados lidos a um elemento HTML, aqui podemos usar a tag iframe ou embed:
Exemplo com a tag iframe:
function lerArquivo() {
const arquivo = this.files[0];
/*
* criar a tag iframe dinamicamente
* e atribui ao src o arquivo para visualização
*/
const iframe = document.createElement('iframe');
iframe.setAttribute("src", window.URL.createObjectURL(arquivo));
iframe.style.width = "640px";
iframe.style.height = "480px";
preview.appendChild(iframe);
}
Exemplo com a tag embed:
function lerArquivo() {
const arquivo = this.files[0];
/*
* cria a tag embed dinamicamente
* e também atribui ao src o arquivo para visualização
*/
const embed = document.createElement('embed');
embed.setAttribute("src", window.URL.createObjectURL(arquivo));
embed.style.width = "640px";
embed.style.height = "480px";
embed.type = "application/pdf";
preview.appendChild(embed);
}
Há ainda uma outra opção, que é criar um link para abrir em nova guia o PDF para ser visualizado.
function lerArquivo() {
const arquivo = this.files[0];
if(arquivo) {
/*
* cria a tag de link dinamicamente
* e cria um objeto de URL a partir do Blob
*/
const link = document.createElement('a');
link.href = URL.createObjectURL(arquivo);
link.target = '_blank';
link.innerText = 'Ver arquivo (nova guia)';
}
}
Caso necessário fazer o download do PDF, podemos utilizar a própria função de download, e o melhor é que não precisamos fazer nenhuma alteração, veja como fica o exemplo:
function lerArquivo() {
const arquivo = this.files[0];
const fReader = new FileReader();
fReader.addEventListener('load', function() {
const embed = document.createElement('embed');
embed.setAttribute("src", fReader.result);
embed.style.width = "640px";
embed.style.height = "480px";
embed.type = "application/pdf";
// Cria o botão para download e vincula ao evento de clique
const btnDownload = document.createElement('button');
btnDownload.innerText = 'Download PDF';
btnDownload.addEventListener('click', function() {
download(embed.src, 'qualquernome.pdf');
});
preview.appendChild(embed);
preview.appendChild(btnDownload);
});
if(arquivo) {
fReader.readAsDataURL(arquivo);
}
}
function download(conteudo, nomeArquivo) {
const a = document.createElement('a');
a.style = 'display: none';
a.href = conteudo;
a.download = nomeArquivo;
document.body.appendChild(a);
a.click();
a.remove();
}
Neste artigo vimos como: