Upload múltiplo com DropzoneJS e CodeIgniter

O upload múltiplo é um recurso muito utilizado em sistemas que necessitam que os usuários façam envio de imagens e arquivos em lote. O DropzoneJS permite que esse upload múltiplo seja feito de maneira mais atraente, possibilitando inclusive utilizar o recurso de “arrastar e soltar”. Combinar o DropzoneJS com o CodeIgniter é bastante simples e rápido, e nesse tutorial vou ensinar passo a passo como integrar e colocar o upload múltiplo pra funcionar.

Montando o ambiente

Faça o download e instalação do CodeIgniter. Aqui no portal existem tutoriais ensinando esse processo:

Ao montar a estrutura de arquivos do ambiente, nomeie o diretório do projeto como upload-multiplo-com-dropzonejs-e-codeigniter.

Em seguida, abra o diretório que acabou de renomear e crie na raiz um outro diretório, chamado assets e dentro desse diretório crie os seguintes diretórios:

  • js
  • css

Volte para a raiz do projeto, onde criou o diretório assets e crie mais um diretório chamado uploads. Esse diretório é onde serão armazenados os arquivos enviados através da rotina de upload múltiplo. Lembre-se que ele precisa ter permissão de escrita, caso contrário dará erro no upload.

Download e Instalação do DropzoneJS

Faça o download do DropzoneJS clicando aqui e salve o arquivo em seu computador. Em seguida descompacte o arquivo e copie os arquivos JS e CSS que estão dentro do diretório dist para os respectivos diretórios em assets, conforme lista abaixo:

  • dist/dropzone.js -> assets/js
  • dist/dropzone.css -> assets/css

Você também pode utilizar o arquivo minificado (.min), que está em dist/min.

Criando a view

Ao criar o ambiente, o CodeIgniter já possui um controller e uma view configurados, então vamos utilizá-los para dar sequência ao tutorial, iniciando agora a codificação do upload.

Abra o arquivo application/views/welcome_message.php e crie nele uma estrutura simples, contendo um cabeçalho e uma chamada para um formulário, sem campos, somente a tag form. Veja abaixo como deverá ficar o código:

Temos uma estrutura básica, onde chamados no cabeçalho os arquivos js e css do DropzoneJS, e no corpo da página temos um cabeçalho H1 que exibe o título do tutorial e o formulário. O formulário é complementado pelos atributos abaixo:

  • action: define a rota para execução do upload
  • class: define a classe dropzone para que haja a relação entre o formulário e os scripts de envio dos arquivos
  • id: pra identificar o elemento para o dropzone, uma vez que você pode ter vários deles em uma mesma página
  • enctype: define que o formulário vai aceitar o upload de arquivos

Repare que na view foi utilizada a função base_url(), que é uma função nativa do CodeIgniter e faz parte do helper URL. Para que ela funcione corretamente, abra o arquivo application/config/autoload.php e adicione a chamada para o carregamento desse helper.

$autoload['helper'] = array('url');

Ao acessar o projeto pelo browser, você deverá ver uma tela semelhante à imagem abaixo:

Upload múltiplo com DropzoneJS e CodeIgniter

A partir desse momento, a implementação do frontend para o upload múltiplo já está feita, não é necessário escrever nenhuma linha adicional de javascript, pois da forma como o formulário foi montado, o script do DropzoneJS já o reconhece automaticamente.

Criando a rota do upload múltiplo

Para que o upload de fato ocorra, vamos criar uma rota para ele no arquivo application/configs/routes.php. A rota deve ficar como o código abaixo:

$route['upload'] = 'Welcome/Upload';

A rota upload vai acionar o método Upload no controller Welcome. Então vamos criar o método Upload para que o seja possível enviar os arquivos em lotes.

Criando a rotina de upload

Abra o arquivo application/controllers/Welcome.php e crie nele um método chamado Upload, esse método será o responsável por processar o upload dos arquivos.

Veja a seguir o código de implementação desse método:

Viu como é fácil criar uma rotina de upload múltiplo usando o CodeIgniter e o DropzoneJS? Enquanto o DropzoneJS cuida de disponibilizar para os usuários a interface para o upload múltiplo, o CodeIgniter cuida de processar cada um dos registros selecionados.

A forma como o código PHP foi escrito para a rotina de upload utilizando a library nativa do CodeIgniter é mesma que é utilizada quando está enviando um único arquivo a partir de um campo do tipo FILE no formulário.

O que acontece no upload múltiplo é que para cada arquivo selecionado é feita uma requisição de upload, seria o mesmo que enviar um arquivo de cada vez e dar um post no formulário, so que aqui o usuário escolhe vários de uma única vez, e esses arquivos vão sendo processados automaticamente.

Ficou com dúvidas? Deixe-as nos comentários que responderei o mais breve possível.

Bons estudos!

button-codigo-fonte

Demo Online