HTML5 File API | Aula 3 de 6 – Lendo e renderizando arquivos localmente com FileReader | Série HTML5 | SW9
Olá a todos. Sejam bem-vindos ao Canal e Blog SW9 (http://blog.sw9.com.br).
Dando continuidade a MEGA Série sobre HTML5, estamos falando sobre a File API.
#O que vimos na aula passada?
Na AULA passada, começamos a criar nossa galeria de imagens. Implementamos todo o processo de seleção de imagens, como acessar e recuperar informações básicas usando o objeto FileList, e finalmente exibimos estas informações na galeria de imagens.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2019/01/31/html5-file-api-aula-2-selecionando-acessando-obtendo-info-de-arquivos-sw9/].
#O que veremos nesta aula?
Reservei esta AULA para implementarmos a leitura de arquivos e exibição de preview na forma de thumbnail. Para chegarmos neste resultado, vamos usar o objeto FileReader. As peguntas a seguir serão respondidas nesta AULA: O que é o objeto FileReader? Quais são as suas propriedades, métodos e eventos? Como ler um arquivo? Como exibi-lo no formato de miniatura?
Ao final da AULA, a nossa galeria de imagens já estará exibindo informações e thumbnail de cada imagem selecionada pelo usuário.
#O que é o objeto FileReader?
De forma bem simples e objetiva, o FileReader é um objeto que permite ler o conteúdo de arquivos armazenados no computador do usuário. E agora vem a melhor parte: este objeto opera de forma assíncrona 😀
Para que seja possível ler um arquivo, precisamos informar ao FileReader qual o File object correspondente (ponteiro para o arquivo) que queremos abrir para leitura.
Este objeto fornece uma série de propriedades, métodos e eventos para manipulação de arquivos. Na sequência, vamos listar rapidamente todos eles, descrevendo de forma resumida o objetivo de cada um destes recursos.
Vamos explicar cada método, propriedade e evento à medida sob demanda, à medida que o projeto galeria de imagens for evoluindo.
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
#Suas propriedades, métodos e eventos
Começando pelas propriedades, o objeto FileReader tem à disposição:
- FileReader.error: armazena o erro que ocorreu durante um processo de leitura de arquivo;
- FileReader.readyState: representa o estado do objeto FileReader. Pode ser EMPTY (nenhum dado lido ainda), LOADING (dado sendo lido), DONE (processo de leitura concluído);
- FileReader.result: esta propriedade vamos ver nesta aula. Armazena o conteúdo do arquivo que foi lido. O formato armazenado vai depender do método que foi usado para iniciar o processo de leitura.
Você precisa saber: esta propriedade só passa a ser válida quando a operação de leitura é concluída com sucesso.
Passando agora para os métodos, basicamente temos à disposição os métodos de leitura: readAsArrayBuffer, readAsBinaryString, readAsDataURL e readAsText. Cada método de leitura lê os dados no formato binário e converte para o formato correspondente, que pode ser identificado facilmente no próprio nome do método.
Além dos métodos de leitura, também existe o método abort(), que permite abortarmos a operação de leitura.
Você precisa saber: quando o processo de leitura é abortado, a propriedade readyState recebe o valor DONE.
Deixamos por último a lista de eventos que o FileReader tem à disposição. Vou classificar estes eventos em 3 grupos: tratar erro (error), tratar cancelamento de leitura (abort), acompanhar progresso de leitura (loadstart, loadend, progress e load).
Cada um destes eventos possui um manipulador associado: FileReader.onabort, FileReader.onerror, FileReader.onload, FileReader.onloadstart, FileReader.onloadend e FileReader.onprogress.
#Lendo um arquivo
No vídeo de hoje, vamos usar a galeria de imagens para explicar como ler um arquivo e na sequência renderizar uma prévia dele no formato de thumbnail.
Para chegar ao resultado esperado, vamos precisar do objeto FileReader, do método readAsDataURL, evento load e a propriedade result.
A ordem seria:
- Criar uma instância do FileReader;
- Chamar o método readAsDataURL, passando como parâmetro o File object correspondente;
- Ao término da leitura, o evento load é disparado, e dentro dele acessaremos o conteúdo retornado pelo método readAsDataURL;
- O conteúdo do arquivo, que foi lido e convertido para o formato DataURL, pode ser acessado a partir da propriedade result, usando o código event.target.result
Não se preocupe. No vídeo de hoje vamos praticar e entender melhor como tudo se encaixa.
#Exibindo um thumbnail
Para exibir uma amostra da imagem no formato de thumbnail, vamos criar um elemento html do tipo imagem, e associar o conteúdo da propriedade
result (event.target.result) ao atributo src do elemento.
#Alternativa síncrona
Para quem deseja trabalhar com leitura de arquivos de forma síncrona… Eu não recomendo, mas aí vai a dica:
Existe o objeto chamado FileReaderSync, que se propõem a fazer o mesmo que o objeto FileReader, mas operando de forma síncrona.
Agora chegou o momento de praticar, assistindo o vídeo que preparei para vocês 😀
[Conclusão]
Na aula de hoje [HTML5 File API | Aula 3 de 6 – Lendo e renderizando arquivos localmente com FileReader | Série HTML5 | SW9], você teve o primeiro contato com o objeto FileReader e aprendeu a usar o evento onload, a propriedade result e o método readAsDataURL para conseguir ler arquivos e exibir uma prévia no formato de thumbnail.
Está disponível na minha área de downloads o projeto parcial. Para acessá-lo basta clicar no link a seguir http://blog.sw9.com.br/acesso-area-de-downloads/, informar um e-mail válido e automaticamente receberá as instruções para acesso.
Dentro da minha área de Downloads, procure pela pasta HTML5/FILEAPI O resto é com vocês
Bom, por hoje é só. Aproveitem o vídeo e bons estudos. Fiquem antenados, que em breve teremos mais novidades.
Espero que gostem deste vídeo. Aproveito para pedir a participação de vocês no canal e blog, curtindo, compartilhando, dando sua opinião e se inscrevendo no canal e blog para receber as novidades em primeira mão.
Fiquem com Deus e até o próximo vídeo.
[Links úteis]
Curso Relacionado: [Aprenda HTML 5 e CSS 3 e Comece a Criar Seus Próprios Sites] – https://goo.gl/QsLPph
Link do vídeo: https://youtu.be/49gZXwLseNM
PlayList Cloud 9: https://goo.gl/7aQbD6
PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8
PlayList File API: https://www.youtube.com/playlist?list=PLtluGZbI5EShAJ52WKsU1MUpmgQpOPkVl
Área de Downloads: http://blog.sw9.com.br/acesso-area-de-downloads/
Meu Blog: http://blog.sw9.com.br
Meu GitHub: https://sw9brl.github.io/MyGitHubPage
Canal youtube: https://youtube.com/+sw9brl
✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se
Que tal me pagar um café :-)
Uma pequena quantidade de café foi consumida durante a produção de um post + vídeo. Se puder, contribua adicionando mais combustível para que eu tenha condições de seguir em frente.
Brincadeiras à parte, o valor selecionado é multiplicado por 2 (x2) que representa a multiplicação de minha dedicação a cada contribuição que recebo.
Deixe um comentário