PHP File Upload: Upload de arquivos com DropzoneJS

Motivaç�o

� bem sabido na comunidade de desenvolvedores a import�ncia de disponibilizar os recursos de download e upload de arquivos de forma f�cil e intuitiva. Nesse quesito, diversos s�o os frameworks que visam simplificar nossa vida, abstraindo boa parte da implementaç�o de c�digo HTML, JavaScript e CSS que ter�amos de escrever para criar recursos mais robustos e completos. Entretanto, a maioria deles falha no quesito usabilidade quando, por exemplo, n�o viabiliza funç�es de �arrastar e soltar�, status do upload (como barras de progresso), sistemas de feedback com mensagens de validaç�o/erro/sucesso, dentre outras.

Este artigo visa expor rapidamente os benef�cios que tais frameworks nos trazem atrav�s da construç�o de uma mini aplicaç�o que faz o upload de imagens para um diret�rio qualquer, usando o framework JavaScript DropzoneJS em conjunto com o PHP como linguagem de servidor.

Passo 1: Instalando o DropzoneJS

O DropzoneJS � uma biblioteca open source que implementa o recurso de upload de arquivos via drag and drop. Ela � leve, n�o depende de outras bibliotecas JavaScript e, ao lidar com arquivos de imagens, ainda fornece a opç�o de pr�-visualizar as mesmas.

Para efetuar a sua instalaç�o, baixe os arquivos JavaScript e CSS do DropzoneJS no GitHub e importe-os na p�gina HTML atrav�s do seguinte c�digo:

<link rel="stylesheet" href="dropzone.css" />
<script src="dropzone.js"></script>

Para fins de padronizaç�o e performance, opte por carregar seus arquivos CSS dentro do cabeçalho HTML, e os arquivos JavaScript ap�s o corpo da p�gina.

Quando esse c�digo for executado no navegador, teremos o DropzoneJS importado e acess�vel via objeto JavaScript window.Dropzone, bem como disponibilizados os estilos que acompanham o framework.

Observaç�o: Um ponto importante a saber � que o DropzoneJS n�o efetua o upload dos arquivos no lado do servidor. Ele serve apenas como uma ponte entre a interface do usu�rio constru�da em HTML e a aplicaç�o web din�mica que recebe os referidos arquivos. Logo, � voc� que dever� implementar o c�digo destinado a armazenar os arquivos utilizando a linguagem de sua prefer�ncia. Nesse artigo optamos pelo PHP.

Passo 2: Criando a classe dropzone

Nosso pr�ximo passo � a criaç�o do elemento de formul�rio que lidar� com a seleç�o e envio dos arquivos. Nele, adicionaremos a classe dropzone que incutir� o estilo caracter�stico do framework:

<form action="upload.php" class="dropzone" id="meuPrimeiroDropzone">
  </form>

Al�m do estilo, essa classe tamb�m permite que o DropzoneJS inicialize todos os seus eventos de upload e os atrele ao respectivo formul�rio. Assim, quando efetuarmos um submit no form, todos os arquivos selecionados ser�o enviados via request para o endereço registrado no atributo action.

Voc� tamb�m pode ter o mecanismo de upload de arquivos sem o uso de JavaScript, utilizando o processo de fallback. Para isso, precisamos incluir a classe fallback no HTML, de prefer�ncia em uma div interna, a qual o DropzoneJS remove quando a p�gina � carregada no navegador. Vejamos como cri�-la na Listagem 1.


  1 <form action="upload.php" class="dropzone" id="meuPrimeiroDropzone">  
  2    <div class="fallback"> 
  3      <input name="fileToUpload" type="file" multiple /> 
  4    </div> 
  5 </form>

Listagem 1. Adicionando a classe fallback dentro do formul�rio

Passo 3: Usando o DropzoneJS programaticamente

Uma opç�o � importaç�o do DropzoneJS via tag <script> � habilit�-lo programaticamente, instanciando a classe dropzone no JavaScript, conforme o c�digo:

var
meuDropzone = new Dropzone("div#meuId", {url:
"upload.php"});

O n�vel de integraç�o do DropzoneJS se estende, inclusive, a outros frameworks JavaScript mais comuns, como � o caso do jQuery. Para habilit�-lo com os seletores jQuery, basta usar o seguinte c�digo:

$("div#meuId").dropzone({ url: "upload.php" });

A propriedade url, conforme observado, se torna obrigat�ria no modelo program�tico, uma vez que n�o temos uma tag de formul�rio com o atributo action especificado para determinar o destino dos arquivos selecionados.

Passo 4: Configurando o upload de arquivos

Uma outra maneira de configurar o upload de arquivos programaticamente � setando a propriedade options do objeto Dropzone. No fim das contas, essa propriedade funciona como uma lista com os ids de todos os formul�rios da p�gina que contenham a classe dropzone. Cada configuraç�o, por sua vez, � individual e deve ser feita separadamente no caso de termos v�rios formul�rios de upload no mesmo HTML.

Vejamos como podemos fazer isso na Listagem 2.


1  Dropzone.options.meuPrimeiroDropzone = {
2   paramName: "fileToUpload", 
3   dictDefaultMessage: "Arraste seus arquivos para c�!",
4   maxFilesize: 300, 
5   accept: function(file, done) {
6     if (file.name == "olamundo.png") {
7       done("Arquivo n�o aceito.");
8     } else {
9       done();
10    }
11  }
12 }

Listagem 2. Configurando as opç�es do DropzoneJS.

Linha 2: informamos o valor do atributo name do elemento de input do tipo file no formul�rio, o qual ser� usado para armazenar os arquivos at� que sejam, de fato, enviados ao servidor;

Linha 3: sobrescreve a mensagem padr�o do elemento de upload;

Linha 4: � definido o tamanho m�ximo de cada arquivo em MB;

Linha 5: funç�o que valida se o upload deve ou n�o ser executado. Ela � opcional, servindo apenas para validar restriç�es de neg�cio, na tela mesmo, que possam impedir o upload;

Linhas 6 a 10: forçamos um teste para verificar o mecanismo de validaç�o do DropzoneJS. Se o arquivo selecionado tiver o nome olamundo.png, o upload ser� negado e a mensagem da linha 7 ser� exibida, caso contr�rio (linha 9), prosseguimos com o upload.

A Figura 1 mostra como ficar� nossa p�gina quando for executada no navegador.

Figura 1. P�gina do upload de arquivos.

Passo 5: Criando o upload PHP no servidor

Para finalizar o exemplo, precisamos implementar o c�digo PHP que ir� receber os arquivos enviados pelo DropzoneJS e salvar os mesmos em um diret�rio qualquer. Para isso, voc� precisar� ter um servidor Apache instalado na sua m�quina.

Dentro do servidor, na pasta onde salvamos os arquivos HTMLs (/htdocs no Xampp ou /www no WAMP), crie um novo arquivo de nome upload.php e adicione o c�digo da Listagem 3.


  1  <?php  
  2    // Nas vers�es do PHP que antecedem a vers�o 4.1.0, � preciso usar o $HTTP_POST_FILES em vez do $_FILES.
  3           
  4    $uploaddir = './uploads';
  5    $uploadfile = $uploaddir . basename($_FILES['fileToUpload']['name']); 
  6           
  7    echo "<pre>";
  8    if (move_uploaded_file($_FILES['fileToUpload']['tmp_name'], $uploadfile)) {
  9          echo "O arquivo � valido e foi carregado com sucesso.\n";
  10   } else {
  11         echo "Algo est� errado aqui!\n";
  12   }
  13          
  14   echo "Aqui est�o algumas informaç�es de depuraç�o para voc�:";
  15   print_r($_FILES);
  16          
  17   print "</pre>";
  18 ?>

Listagem 3. Implementaç�o do mecanismo de upload de arquivos no servidor

Linhas 4 e 5: definimos o diret�rio onde os arquivos ser�o salvos;

Linha 8: chamamos a funç�o move_uploaded_file() do PHP. Essa funç�o efetua o upload e retorna um booleano informando se o processo ocorreu com sucesso;

Linha 15: imprimimos todos os arquivos do diret�rio no log para atestar que o upload funcionou.

O restante das linhas serve apenas para logar informaç�es adicionais que auxiliar�o no debug do c�digo.

A Figura 2 mostra o resultado final da implementaç�o ao tentar o envio de:

Um arquivo com sucesso;
Um arquivo com erro (este, especificamente, cai no fluxo de exceç�o que implementamos, isto �, quando o nome do arquivo for olamundo.png);
E, por fim, um arquivo de 100MB com o upload em progresso (o framework, por padr�o, j� vem com uma barra de loading para mostrar ao usu�rio o andamento do processo).

Figura 2. Resultado final da aplicaç�o.

Confira tamb�m

Cursos de PHP

Cursos

Cursos de JavaScript

Cursos

O que � jQuery?

Curso

Upload de arquivos com DropzoneJS e PHP

Aprenda neste artigo como construir um componente de upload de arquivos com DropzoneJS em PHP.