HTML5 FILE API | Aula 5 de 6 – Abortando a operação de leitura | 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 quarta AULA, foi ensinado como acompanhar o andamento da leitura dos arquivos, exibindo ao usuário uma barra de progresso. Durante a implementação deste recurso, em nossa galeria de imagens, você teve contato com os manipuladores de eventos onprogress e onloadstart, com os eventos progress e loadstart, e com as propriedades loaded, total e lengthComputable.
Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2019/02/14/html5-file-api-aula-4-de-6-monitorar-progresso-de-leitura-sw9/].
#O que veremos nesta aula?
Hoje vamos aprender como cancelar uma operação de leitura. Você vai ter a oportunidade de incrementar o projeto de galeria de imagens, incluindo um botão de cancelamento para cada arquivo lido e a possibilidade de ao clicar nele, cancelar o processo de leitura.
Você vai ter contato com o manipulador de evento onabort, o evento abort e o método abort().
#Porque cancelar uma operação de leitura?
O nosso usuário pode ter vários motivos para querer cancelar 1 ou mais arquivos que ele selecionou para upload. Posso citar aqui dois deles:
- O usuário se enganou e selecionou o arquivo incorreto;
- O usuário percebeu que a leitura vai demorar muito e decidiu cancelar a operação.
Com base nas necessidades do usuário, é primordial implementarmos no projeto uma funcionalidade que permita cancelar/abortar uma operação de leitura. É neste cenário que entra em jogo o File API, mais especificamente o objeto FileReader e seus recursos disponíveis para cancelamento de leitura.
#Fluxo de trabalho
Para desenvolvermos a funcionalidade de cancelamento de leitura, precisamos entender e usar os seguintes recursos disponíveis no objeto FileReader:
- Evento abort;
- Manipulador de evento onabort;
- Método abort().
Se você está gostando da AULA de hoje, não deixe de compartilhar com seus amigos usando as redes sociais de sua preferência.
#Evento abort
A única informação que você precisa ter em mente é que o evento abort é disparado sempre que fazemos uma chamada ao método abort(). No nosso caso, vamos chamar o método abort() durante um evento de clique no botão de cancelamento.
#Manipulador de evento onabort
Tudo bem, o usuário clicou no botão de cancelamento, o método abort() foi chamado e na sequência o evento abort foi disparado. Tudo bonito até aqui né? Não precisamos fazer mais nada em nosso código? Na verdade precisamos sim 😀
Ainda falta tratarmos o comportamento de nosso projeto, quando o evento abort é disparado. No caso da galeria de imagens, queremos que após um pedido de cancelamento, o elemento HTML que possui as informações do arquivo, seja removido da página.
É nesse momento que entra em ação o manipulador de evento onabort. Após o disparo do evento abort, este manipulador será acionado e todo o código associado a ele será executado.
Eu achei bem simples. E vocês? O que acharam?
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 5 de 6 – Abortando a operação de leitura | SW9], você aprendeu a cancelar uma operação de leitura. Isso foi possível graças ao uso combinado do manipulador de evento onabort, do evento abort e do método abort().
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/VwJFXr9RdjQ
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