HTML5 FILE API | Aula 6 de 6 – Tratamento de erros e validação | 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 quinta AULA, explicamos como abortar/cancelar uma operação de leitura e remover os itens cancelados de nossa página [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/02/26/html5-file-api-aula-5-de-6-abortando-operacao-de-leitura-sw9].
#O que veremos nesta aula?
Agora eu convido vocês para fecharmos a nossa pequena série sobre File API com chave de ouro. Nesta última AULA, a minha missão será compartilhar com vocês, como podemos usar os recursos disponíveis no objeto FileReader para capturar erros de leitura.
Para que o nosso objetivo seja atingido, vamos usar o manipular de evento onerror, o evento error e as propriedades name e message.
Na sequência, vamos criar uma regra de validação, que será aplicada logo após o usuário selecionar arquivos: tamanho máximo permitido por arquivo.
#Capturando erros de leitura
Usando os recursos fornecidos pelo objeto FileReader, é possível capturar erros que podem ocorrer durante uma operação de leitura. Nunca é demais reforçar, que a captura e tratativa de erros é algo essencial em um projeto. Podemos, por exemplo, capturar erros e gravá-los em algum arquivo, banco de dados, para uma tratativa posterior. Também podemos exibir uma mensagem amigável ao usuário final, informando que ocorreu um erro e dando orientação de como ele deve agir.
Vamos implementar este mecanismo de captura de erros dentro de nosso projeto galeria de imagens. Para que isso seja possível, usaremos o manipulador de eventos onerror, o evento error, as propriedades name e message.
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
Vou seguir o seguinte fluxo de trabalho com vocês:
- Usar o manipulador de evento onerror;
- Exibir no console do navegador os erros identificados;
- Manipular o DOM para remover o item que foi afetado pelo erro.
#Evento error
O evento error é disparado quando um erro ocorre durante uma operação de leitura. Sabendo disso, podemos usar o manipulador de evento onerror, que nos permite associar o código necessário que será executado a cada erro.
#Capturar o código e mensagem de erro
Dentro da função que associamos ao manipulador onerror, vamos usar a API console para exibir o erro no console do navegador. Mas como é possível capturar o código e a mensagem de erro correspondente?
Antigamente era possível usar a propriedade code, para recuperar o código de erro. Hoje em dia, esta propriedade foi descontinuada. Em seu lugar, devemos usar as propriedades name e message.
A propriedade name vai armazenar o código do erro e a propriedade message vai armazenar a mensagem de erro correspondente.
#Manipular DOM para remover item da galeria de imagem
Após exibir a mensagem de erro no console do navegador, o próximo passo é remover o item/imagem que foi afetado pelo erro de leitura.
Para remover o item da galeria de imagem, vamos manipular o DOM usando o método remove().
#Bônus – Regras de validação
Para completar a nossa última AULA, você vai ter a oportunidade de aprender como criar regras de validação antes mesmo de iniciar uma operação de leitura. Vamos implementar em nossa galeria de imagens a seguinte regra de validação:
- Limite máximo permitido por arquivo: vamos definir qual o tamanho máximo que cada arquivo deve ter. Caso um arquivo selecionado pelo usuário possua um tamanho maior que o limite, a operação de leitura não será iniciada.
Por hoje é só, fiquem agora com o vídeo que preparei para vocês. Go Go Go
[Conclusão]
Na aula de hoje [HTML5 FILE API | Aula 6 de 6 – Tratamento de erros e validação | Série HTML5 | SW9], você aprendeu a utilizar o manipular de evento onerror, o evento error e as propriedades message e name. Usando estes recursos, é possível manipular os erros disparados durante uma operação de leitura. Para finalizar, você também aprendeu a criar regras de validação (tamanho máximo de arquivo) e aplicar esta validação logo após a seleção de arquivos.
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/6GkCgMWtNsA
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