HTML5 File API | Aula 4 de 6 – Monitorando o progresso da leitura de cada arquivo | 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 terceira AULA, foi explicado como realizar a leitura de arquivos locais e renderizar uma amostra no navegador. Como estamos trabalhando com uma galeria de imagens, fizemos a leitura de arquivos do tipo imagem e exibimos um thumbnail para o usuário.

Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2019/02/12/html5-file-api-aula-3-de-6-lendo-arquivos-locais-serie-html5-sw9].

#O que veremos nesta aula?

Chegou a hora de você aprender como é possível acompanhar o progresso de leitura de um arquivo. Nesta AULA, você terá a oportunidade de incrementar o projeto galeria de imagens, incluindo uma lógica de verificação de progresso de leitura e exibição de uma barra (progressbar) para o usuário.

Você vai ter contato com os eventos loadstart, load e progress para chegarmos ao resultado esperado.

#Barra de Progresso

Antes de trabalharmos com os eventos fornecidos pelo File API, precisamos definir qual componente usaremos para a barra de progresso.

A barra de progresso é o principal item que devemos implementar, já que ele é o único que será visto pelo usuário. Aproveitando que o nossa trilha atual está relacionada com HTML5, iremos usar a tag progress (nativa do HTML5).

O uso dela é bem simples e a sintaxe é:

[code]<progress id="progress-bar" value=0 max=100 ></progress>[/code]

Em resumo, usaremos os atributos max e value para atualizar a barra de progresso.

Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.

#Fluxo de trabalho

Qual a ordem que devemos seguir para implementar a lógica de progresso de leitura? Não existe um fluxo obrigatório a ser seguido, mas a minha sugestão é usar o fluxo a seguir (mesmo fluxo que usaremos para a galeria de imagens):

Usar o manipulador de evento onloadstart;
Usar o manipulador de evento onprogress;
Usar o manipulador de evento onload.

#Evento loadstart

Devemos associar ao manipulador onloadstart, o código necessário que será executado no momento que o evento loadstart for disparado. Mas quando este evento é disparado? O seu disparo ocorre no exato momento que uma operação de leitura é iniciada. Sabendo disso, associaremos a este manipulador, o código que vai inicializar e exibir a barra de progresso;

#Evento progress

Neste ponto vamos usar o manipulador onprogress, e associar a ele o código de controle e checagem do progresso de leitura.

Como deve funcionar? Durante a operação de leitura, o evento progress é disparado n vezes. A cada disparo, vamos fazer uma checagem avaliando o total de bytes do arquivo que está sendo lido e a quantidade lida até o momento. Estas informações são geradas e armazenadas nas propriedades total e loaded.

total = quantidade total de bytes do arquivo

loaded = quantidade de bytes transferido desde o começo da operação de leitura

Como complemento, também vamos usar a propriedade lengthComputable (tipo booleano) para checar se a quantidade total de bytes do arquivo é conhecida ou não.

#Evento load

Como o evento load é disparado quando uma operação de leitura é finalizada com sucesso (arquivo lido com sucesso), vamos associar ao manipulador onload o código que vai substituir a barra de progresso pelo thumbnail.

Por hoje é só, fiquem agora com o vídeo que preparei para vocês. Go Go Go

Aprenda HTML 5 e CSS 3

Comece a criar Sites Com o Melhor do HTML 5 e CSS 3

Curso Relacionado

[Conclusão]

Na aula de hoje [HTML5 File API | Aula 4 de 6 – Monitorando o progresso da leitura de cada arquivo | Série HTML5 | SW9], você aprendeu como acompanhar o progresso de leitura dos arquivos e exibir uma barra de progresso ao usuário. Tudo isso foi possível graças ao uso combinado dos eventos loadstart, progress e load.

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.