A atividade exercida localmente para a leitura de arquivos fornecidos pelo cliente na web sempre foi a de selecionar o arquivo e enviá-los ao servidor para que este possa, de alguma forma, fazer a leitura e retornar os dados de leitura para o cliente. Esta é a prática usual. Mas o HTML5 veio com suas API para desmistificar o usual.
A File API desmitifica a prática de enviar um arquivo para o servidor para que ele possa ser lido. Sim, você pode ler arquivos no navegador, usando a capacidade processamento do cliente, e liberando seu servidor para executar atividades que somente ele possa executar.
Mas, afinal, como funciona esta tal de File API? Bem, ela provê um padrão para executar as seguintes atividades:
- Selecionar arquivos ou uma lista de arquivos;
- Ler alguns atributos dos arquivos selecionados, e;
- Ler o conteúdo dos arquivos selecionados.
Bem, mas você pode estar imaginando que agora é possível criar uma aplicação que irá, ao ser carregado no navegador, fazer a leitura de arquivos do usuário fazendo aquilo para o qual foi construído. Infelizmente não, mas felizmente no que se diz respeito a segurança. Você só poderá manipular arquivos locais que o usuário prover acesso conscientemente, única e exclusivamente por este meio.
Selecionar Arquivos e Ler Seus Atributos
Para selecionarmos um arquivo podemos criar um elemento input com a propriedade type igual a _file. _Com isto o usuário poderá escolher o arquivo que será selecionado. Vamos exibir os atributos do arquivo selecionado em um parágrafo.
Agora que podemos selecionar o arquivo, vamos pegar alguns atributos. É possível pegar os seguintes atributos do arquivo selecionado: nome, tipo de arquivo e tamanho do arquivo. Como fazer isto? Veja abaixo:
O que estamos fazendo acima é pegar o arquivo selecionado no elemento input, verificar se tem algum arquivo selecionado e pegar os atributos de nome, tipo e tamanho do arquivo no índice zero. Em seguida estes são exibidos no parágrafo com o id atributos.
É claro que pegar as propriedades de um arquivo pode ser útil para muitas atividades. Mas o que mais impressiona na File API é possibilidade de leitura do conteúdo de arquivos. Vamos ver como isto é possível?
FileReader
É possível ler arquivos na memória do cliente por meio de uma interface da File API chamada FileReader. A FileReader fornece métodos, atributos e eventos que permitem a leitura de arquivos de forma assíncrona.
Os elementos acima possibilitam a seleção de uma imagem para carregamento no navegador. Posteriormente as imagens serão exibidas na div mostrada acima.
O script para carregar a imagem selecionada e exibi-la para o usuário, utiliza o método onload do objeto FileReader , conforme mostra o código abaixo:
Primeiro, nós lemos os atributos de um arquivo, agora nós carregamos um arquivo de imagem. Mas na verdade o que eu quero mostrar para vocês é a capacidade de leitura de um arquivo csv. Um arquivo do tipo csv pode conter dados, que quando carregados, possibilita a geração de tabelas, gráficos e todas as formas de exibição de dados possíveis. Novamente digo que isto poderia ser feito pelo servidor, mas não queremos consumir ciclos do servidor desnecessariamente.
Acima nós criamos uma tag input com type file para carregarmos o nosso arquivo csv. No evento onchage estamos executando uma função que irá fazer a mágica para nós. Em seguida temo uma tag onde serão exibidos os dados do csv após carregado.
Acima nós criamos uma variável do tipo FileReader logo na sequência atribuímos a função leCSV ao evento de onload. Sendo assim, no momento em que o arquivo csv for carregado ele disparará a função leCSV.
Agora nós contruímos a função que será executada para selecionar o arquivo csv.
Quando o evento de onload for disparado ele executará a função acima, nela o arquivo csv lido será usado para contruir tabelas com suas linhas e colunas e o resultado final será inserido na tag CSVsaida.
Com este EXEMPLO, não temos dúvidas do poder deste padrão web. De fato poderemos simplificar muito o trabalho de leitura de arquivos. Agora fica por sua curiosidade e necessidade explorar a File API.
Bons estudos e bom trabalho!
