File API
A File API é uma classificação da WEB atualmente ministrada pela W3C (World Wide WEB Consortium) com o intuito de mostrar objetos de arquivos em aplicativos WEB com uma funcionalidade interessante, escolher e acessar dados pessoais por meio de programação.
Com isso , poderemos ler arquivos no browser usando o processamento do cliente sem ter que enviá-los ao servidor para uma interpretação e retorno das informações ,ou seja , o usuário poderá acessar arquivos locais no computador com segurança sem se submeter a uso de extensões e plug-ins.
Ela realiza as seguintes funções:
- Ler atributos de arquivos escolhidos;
- Escolher uma lista de arquivos ou só um arquivo;
- Interpretar as informações do arquivo escolhido.
A File API nos fornece alguns métodos, objetos e propriedades para a sua manipulação. As propriedades são usadas para retornar informações bastantes úteis sobre os arquivos interpretados, como, por exemplo:
- Name: Retorna o nome do arquivo;
- Type: Retorna o tipo de conteúdo do objeto;
- Length: Retorna o número de arquivos contidos em um objeto “FileList”.
A API também nos possibilita acessar objetos com informações interessantes, exemplos:
- Blob : representa uma seqüência de bytes semelhante a um arquivo e fornece métodos e propriedades para criar ou manipular intervalos de dados binários;
- File: O objeto File (que herda do objeto blob) fornece atributos informativos (somente leitura) sobre um arquivo;
- FileReader: Fornece métodos para ler de forma assíncrona um arquivo ou Blob e eventos para obter os resultados dessas leituras.
Os métodos disponibilizados nos permite realizar ações que podem ser executadas em objetos, exemplos:
- Item: Retorna um objeto “File”de um objeto “FileList”;
- ReadAsBinaryString: Lê o conteúdo de um blob ou arquivo como binário;
- CreateObjectURL: Cria uma URL para o objeto especificado.
Como observado acima, vimos que a API nos fornece um contexto relativamente grande para a sua manipulação tornando-se uma ferramenta bastante útil para a interpretação de arquivos. Mas, afinal, como funciona esta tal de File API? é o que veremos em seguida.
Escolher arquivos e interpretar seus atributos
Primeiramente, para escolhermos um arquivo temos que ter uma “<input>” com a propriedade “type = file” para indicar que você está disponibilizando um arquivo ou uma lista de arquivos para a leitura da File API.
Em seguida, iremos obter o arquivo, processar os dados e retornar algumas informações a respeito do arquivo.
A função “obterArquivo” recebe o arquivo com a propriedade “id = arquivo” verifica se tem algum arquivo escolhido, e mostra as informações em relação ao arquivo selecionado. Note que nas linhas 5, 6 e 7 foram usadas algumas propriedades da File API citadas anteriormente.
Além de obter as propriedades de um arquivo com a FILE API , você pode também interpretar o conteúdo do arquivo, utilizando um objeto citado no inicio do artigo , o “FileReader”. Iremos ver um exemplo a seguir de como isso é feito.
Interpretação de conteúdo com FileReader
O objeto “FileReader” nos fornece propriedades, especialmente métodos para a leitura dos conteúdos de arquivo ou blob de forma assíncrona e eventos para o retorno dos resultados dessas interpretações.vejamos a sintaxe de como declarar o objeto.
Como levantado anteriormente o “FileReader” nos disponibiliza alguns eventos para obtenção dos resultados da interpretação dos conteúdos , como, por exemplo:
- Onload: ProgressEvent que ocorre quando uma operação de leitura por um objeto FileReader é concluída com êxito;
- Onabort: ProgressEvent que ocorre quando uma operação de leitura é abortada chamando o método abort.
ProgressEvent é responsável por exibir o andamento das operações.
Observamos também alguns métodos de leitura do objeto “FileReader”:
- ReadAsDataURL: Lê um objeto na memória como uma string de URL de dados;
- Abort: Aborta uma operação de leitura do “FileReader”.
Com isso, vejamos um pequeno exemplo de leitura de arquivos com “FileReader” para clarear um pouco mais a forma de manipulação deste objeto.
Em relação ao código acima , a “input” está recebendo um arquivo do tipo imagem e chamando a função “obterArquivo” para execução , note que neste trecho de código , primeiramente está sendo realizada a seleção do arquivo e em seguida o tratamento da função “obterArquivo” que veremos a seguir.
Na função “obterArquivo” , primeiro está ocorrendo a seleção da ‘div’ para receber a tag ‘img’ para a exibição da imagem posteriormente , logo depois a variável ‘file’ recebe o arquivo na posição 0, é criado o elemento ‘img’ e setado como filho na ‘div’ com propriedade “id=imagemdiv”. Note que na linha 9 ,é declarado o objeto “FileReader” , na 10, é utilizado o evento ‘onload’ que verifica se a leitura foi concluída com êxito e na 11, o método ‘readAsDataURL’ que lê o objeto na memória como uma string de dados.
Para de…, iremos falar de CSV, que é um arquivo contendo dados para a geração de tabelas e todas as formas de exibição dados possíveis. vejamos sua utilização.
No código acima, ocorre a criação da ‘input’ para a seleção e carregamento do arquivo CSV , é chamada a função ‘obterCSV’ pela propriedade ‘onchange’ e a criação de uma ‘div’ para o resultado.
notemos que na linha 1 é criada um tipo “FileReader” e seguidamente quando carregar a pagina a função leCSV deverá ser inicializada também.
Na função acima , a função recebe o arquivo , seta a variável ‘file’ com o arquivo na posição 0 , e chama a função ‘leitorDeCSV’ juntamente com o método “ReadAsText” que lê um objeto na memória como uma string de texto.
A função acima é responsável por fazer uma tabela dos dados , note que há uma concatenação dos dados na linha 10 com as tags ‘<td>’ justamente para a formação da tabela , em seguida a tabela é exibida na “div” com a propriedade “id = CSVsaida”. Essa função será disparada junto com o carregamento da página sendo umas das primeiras funções a serem executadas.
Conclusão
De acordo com os fatos anteriormente citados a “FILE API” pode ser bastante útil e seguro para o usuário , visto que o usuário não precisa enviar dados para o servidor interpretar e nem se submeter a usos de extensões e plug-ins, já que podemos fazer a interpretação dos arquivos com o processamento do cliente. Com o uso da “FILE API” podemos de fato simplificar muito o trabalho de leitura de arquivos.
