Drag & Drop Com HTML5 | Aula 8 – Arrastando do Desktop Para o Navegador | 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. O Objetivo é apresentar os recursos e as possibilidades que surgiram com o advento do HTML5.

Neste momento, estamos vendo como implementar Drag & Drop de forma nativa com HTML 5.

O que vimos na aula passada?

Na aula passada, começamos a implementar uma área de documentos (acima de nosso KanBan Simples), com o objetivo de explicar como funciona o processo de arrastar arquivos do Desktop para o Navegador, usando a API Drag e Drop.

Você perdeu esta AULA? Não se preocupe, segue então o link para acessá-la [http://blog.sw9.com.br/2019/01/15/drag-e-drop-com-html5-aula-7-arrastando-desktop-navegador].

O que veremos nesta aula?

O objetivo é concluirmos o projeto iniciado na AULA passada. Como soltar os arquivos que foram arrastados do Desktop para dentro de nossa área de soltura chamada file zone? Como recuperar e exibir informações básicas de cada arquivo arrastado? Estas são perguntas que serão respondidas nesta última AULA.

Soltando arquivos na área de soltura

Você se recorda que durante a implementação do KanBan Simples, usamos o objeto dataTransfer e o método correspondente getData, para recuperar os dados que serão soltos na dropzone. Naquele momento o código usado foi: event.dataTransfer.getData( ).

O uso do método getData é aderente para recuperar elementos armazenados previamente pelo método setData( ), mas não é válido para acessarmos dados de arquivos.

OK, entendido. Então qual é a solução para acessar os dados dos arquivos que estão sendo arrastados do Desktop para o navegador? Tem solução? Sim, claro que tem :).

Vamos usar uma propriedade que também faz parte do objeto dataTransfer. O nome desta propriedade é files. Usando o código event.dataTransfer.files, é possível obtermos uma lista de objetos do tipo file. Mas tudo, é claro, vai depender da quantidade de arquivos que estamos arrastando. Se arrastarmos apenas 1 arquivo, a propriedade files vai trazer apenas 1 objeto do tipo file, se arrastarmos 2 arquivos, teremos uma lista com 2 objetos do tipo file, e assim por diante.

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

Obtendo e exibindo informações de cada arquivo

Com base na lista retornada pela propriedade files, será possível percorrer esta lista e, a cada iteração, recuperar informações correspondentes a cada arquivo.

Para o nosso projeto, vamos recuperar e exibir as seguintes informações de cada arquivo:

• Nome;
• Data da última modificação;
• MIME type;
• Tamanho em bytes.

Vocês perceberam como é simples obter informações dos arquivos a partir do front-end? Usando esta técnica, é possível fazer validação do lado do cliente, sem a necessidade de enviá-los para o servidor.

Quais são as atividades de hoje?

•  Implementar toda a lógica que será disparada pelo evento drop. Dentro desta lógica vamos usar a propriedade files, que vai conter os dados correspondentes aos arquivos arrastados e na sequência usar esta mesma estrutura para recuperar e exibir informações básicas de cada arquivo, como: nome, data da última alteração, MIME type e tamanho em bytes;

• Criar uma lógica para impedir os arquivos que estão sendo arrastados sejam soltos nas áreas de soltura correspondes ao KanBan Simples. Para isso vamos implementar:
  • Novo estilo chamado alert-box danger;
  • Exibir o estilo alert-box danger quando o usuário tentar mover os arquivos para o KanBan Simples: neste caso, será necessário alterar a lógica disparada pelos eventos dragEnter e DragLeave que estão associados com a área nomeada como Card Zone.

Você Sabia?

Além de recuperar informação de cada arquivo, é possível ler o seu conteúdo, armazená-lo em memória, e muitos mais graças a especificação File API.

Bom, mas isso será tema das próximas AULAS.

Por hoje é só. Chegou o momento de assistirmos a AULA preparada especialmente para vocês.

[Conclusão]

Na aula de hoje [Drag & Drop Com HTML5 | Aula 8 – Arrastando do Desktop Para o Navegador | Série HTML5 | SW9], concluímos o projeto iniciado na AULA passada.  Durante a implementação, aprendemos como soltar os arquivos, recuperar e exibir informações básicas sobre estes 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/DND.  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

PlayList Cloud 9: https://goo.gl/7aQbD6

PlayList Mega Série HTML5: https://www.youtube.com/watch?v=D-XN-miEwP0&list=PLtluGZbI5ESj8XWTJcJmrVW6Q_tCi7uR8

Á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

Link do vídeo: https://youtu.be/Civ5WNRh_PQ

✔ Clique em gostei ✔ Compartilhe ✔ Inscreva-se