O Dropzone.js é uma biblioteca JavaScript de código aberto que fornece uma maneira fácil de implementar a funcionalidade de arrastar e soltar ficheiros nas suas páginas web. Com o Dropzone.js, os utilizadores podem simplesmente arrastar e soltar ficheiros numa área específica da página para fazer upload dos ficheiros para o servidor.
Neste artigo, vamos explicar como pode utilizar o Dropzone.js nas suas páginas web e como criar uma área de upload de ficheiros personalizada com este recurso incrível. Também vamos incluir exemplos práticos para ajudá-lo a começar a usar o Dropzone.js.
Configurar o Dropzone.js
Antes de começar a usar o Dropzone.js, necessita de fazer o download dos ficheiros JavaScript e CSS da biblioteca. Pode fazer isso acedendo o site oficial do Dropzone.js e fazer o download dos ficheiros.
Assim que tiver feito o download, pode começar a configurar o Dropzone.js na sua página. Para fazer isso, precisa incluir o ficheiro CSS e o ficheiro JavaScript na sua página, além de incluir o ficheiro jQuery.
<!-- Inclua o arquivo CSS -->
<link rel="stylesheet" href="caminho/para/dropzone.css">
<!-- Inclua o arquivo jQuery -->
<script src="caminho/para/jquery.min.js"></script>
<!-- Inclua o arquivo JavaScript do Dropzone.js -->
<script src="caminho/para/dropzone.js"></script>
Criar uma área de upload com Dropzone.js
Para criar uma área de upload com Dropzone.js, é necessário criar um elemento HTML que servirá como a área de drop (arrastar e soltar) para os ficheiros. Em seguida, é necessário inicializar o Dropzone.js com as opções de configuração que se deseja utilizar.
Aqui está um exemplo básico de como criar uma área de upload com Dropzone.js:
<div id="my-dropzone" class="dropzone"></div>
<script>
// Inicializar Dropzone.js
Dropzone.options.myDropzone = {
paramName: "file", // Nome do ficheiro que será enviado para o servidor
maxFilesize: 2, // Tamanho máximo do ficheiro em MB
addRemoveLinks: true, // Adiciona o link "remover" ao ficheiro carregado
dictDefaultMessage: "Arraste e solte aqui os ficheiros ou clique para selecionar ficheiros", // Mensagem por defeito da área de drop
dictRemoveFile: "Remover ficheiro", // Texto do link "remover" do ficheiro carregado
init: function() {
this.on("success", function(file, response) {
console.log("Ficheiro enviado com sucesso!");
});
}
};
</script>
Neste exemplo, criamos uma div com o ID “my-dropzone” e a classe “dropzone”. Em seguida, inicializamos o Dropzone.js utilizando a opção “Dropzone.options” e definimos as opções de configuração que queremos utilizar.
A opção “paramName” define o nome do ficheiro que será enviado para o servidor. A opção “maxFilesize” define o tamanho máximo do ficheiro em MB. A opção “addRemoveLinks” adiciona o link “remover” ao ficheiro carregado, e a opção “dictDefaultMessage” define a mensagem padrão da área de drop.
Adicionar eventos ao Dropzone.js
Adicionar eventos ao Dropzone.js é uma óptima maneira de personalizar o comportamento da sua área de upload. Os eventos são acionados em diferentes momentos durante o processo de upload, como quando um ficheiro é adicionado, quando o upload começa ou quando o upload é concluído. Nesta secção, vamos explorar alguns exemplos de como adicionar eventos ao Dropzone.js.
Adicionar um evento quando um ficheiro é adicionado
Para adicionar um evento quando um ficheiro é adicionado à sua área de upload, pode utilizar o evento “addedfile”. Esse evento é accionado quando um ficheiro é adicionado à sua área de drop.
<script>
Dropzone.options.myDropzone = {
init: function() {
this.on("addedfile", function(file) {
console.log("Ficheiro adicionado: " + file.name);
});
}
};
</script>
Neste exemplo, utilizamos a função “on” para adicionar o evento “addedfile”. Dentro da função do evento, utilizamos o objeto “file” para aceder às informações sobre o ficheiro que foi adicionado. Neste caso, estamos somente a escrever uma mensagem na consola, que indica que um ficheiro foi adicionado.
Adicionar um evento quando o upload começa
Para adicionar um evento quando o upload começa, pode utilizar o evento “sending”. Esse evento é accionado imediatamente antes que o upload comece.
<script>
Dropzone.options.myDropzone = {
init: function() {
this.on("sending", function(file, xhr, formData) {
console.log("A enviar o ficheiro: " + file.name);
});
}
};
</script>
Neste exemplo, utilizamos a função “on” para adicionar o evento “sending”. Dentro da função do evento, utilizamos o objecto “file” para aceder às informações sobre o ficheiro que está a ser enviado. Neste caso, estamos somente a escrever uma mensagem na consola, que indica que um ficheiro foi enviado.
Adicionar um evento quando o upload é concluído
Para adicionar um evento quando o upload é concluído, pode utilizar o evento “success”. Esse evento é accionado quando o upload é concluído com sucesso.
<script>
Dropzone.options.myDropzone = {
init: function() {
this.on("success", function(file, response) {
console.log("Ficheiro enviado com sucesso: " + file.name);
});
}
};
</script>
Neste exemplo, usamos a função “on” para adicionar o evento “success”. Dentro da função do evento, usamos o objeto “file” para acessar informações sobre o arquivo que foi enviado com sucesso. Neste caso, estamos somente a escrever uma mensagem na consola, que indica que um ficheiro foi enviado com sucesso.
Conclusão
Com a biblioteca Dropzone.js, o programador web tem grande facilidade e flexibilidade em construir um formulário para upload de ficheiros, de modo a que possa ser integrado em qualquer tipo de dispositivo ou de site.