segunda-feira, 27 de junho de 2011

Upload de vários arquivos com zend framework e jquery



Esse post é dedicado a você que precisa fazer upload multiplo de arquivo com zend, para isso alguns detalhes antes...

Entender o que vamos fazer...
Vc que precisa fazer upload multiplo com zend framework sua solução esta aqui, e o que é melhor ainda não vamos criar diversos inputs mas sim utilizar o nosso grande amigo JQUERY para organizar esse FRONTEND e com um único input vamos inserir todos os arquivos que nos interessar...

O que vc precisa saber para entender o tutorial...
Enteder MVC é essencial, e um pouco do funcionamento do ZEND FRAMEWORK é interessante, mas se vc utilizar outro framework como CODEIGNITER, CAKE,SYMPHONY ou YII irá entender perfeitamente tudo que irei explicar aqui.

Mãos a 'OBRA'...

Uma vez que o importante aqui é entender como montar esse multiplo upload com ZEND então vamos separar duas partes apenas do MVC que são o CONTROLLER (onde vamos montar a lógica do negócio)  e a VIEW (onde vamos receber os arquivos pelo usuário).

Vamos usar 3 arquivos somente
No Controller
IndexController.php

E na View (INDEX)
index.phtml e envia.phtml

Vamos começar pelo FRONTEND ou seja, pelo JQUERY...

Para inserir vários arquivos em um unico input utilizamos o plugin do JQUERY Multifile.

Carregue esses arquivos na view:
 Carregando js
  1. <?php
  2.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.js');
  3.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.MetaData.js');
  4.  $this->headScript()->appendFile($this->baseUrl().'/js/jquery.MultiFile.js');
  5. ?>

OBSERVAÇÃO: Preste atenção na chamada, eu coloquei os arquivos la na min ha public dentro do diretório js que eu mesmo criei, essa chamada deve ficar clara, é bem simples para você que esta acostumado mas vc que costuma chamar arquivos js e folhas de estilo procure lêr algo sobre o assunto pois a estrutura de diretório do zend é diferente.


Vamos para o simples html de upload da imagem:

  formulario de envio
  1. <form name="fotos" action="/index/envia" method="POST" enctype="multipart/form-data">
  2. <input type="file" name="foto[]"  class="multi" accept="jpeg|jpg|png|gif" maxlength="20" />
  3.         <button name="enviar" >enviar </button>
  4. </form>

Vc que esta acostumado com isso é simples mas vamos explicar:


Criamos o formulario mandando para a enviaAction do controller q vamos criar em breve...
Montamos o input colocando como nome um tipo array "
foto[]" e inserindo a classe "multi" (isso é necessário para chamar o multifle)
Ainda colocamos o parametro accept e quais formatos vamos aceitar o | serve para separar, por fim o maxlength que define a quantidade de arquivos que vamos aceitar, nesse caso aceito apenas 20 arquivos.
Percebem a velocidade q fizemos algo que alem de visualmente legal é bem funcional?
Bem, terminando o front end vamos abrir o arquivo IndexController.php

Vamos criar a action q ja falei 2 vezes acima... a tal da enviaAction:
public function enviaAction(){ 
}

...dentro dela vamos receber o arquivo utilizando a classe Zend_File_Transfer_Adapter_Http

ACTION PARA SUBIR ARQUIVO
  1.     public function enviaAction() {
  2.         /* Instancia Zend_File_Transfer_Adapter_Http */
  3.         $upload = new Zend_File_Transfer_Adapter_Http();
  4.         /* Destino do arquivo */
  5.         $upload->setDestination('temp/');
  6.         /* Pega info dos files */
  7.         $files = $upload->getFileInfo();
  8.         /* Faz laço dos files */
  9.         foreach ($files as $file => $info) {
  10.             /* Verifica se é valido */
  11.             if ($upload->isValid($file)) {
  12.                 /* Sobe */
  13.                 $upload->receive($file);
  14.             }
  15.         }

Vou explicar apenas o foreach pois os comentários estão bem intuitvos...
utilizamos o metodo getFileInfo(); da classe chamada, com ele transformamos nosso objeto $files em um array de dados e após esse array é só jogar no foreach perguntar se é valido e utilizar o método receive inserindo o indice que é o arquivo propriamente dito.

Mas e ai pv pq vc criou o envia.phtml na view? 
Resposta: A para exibir alguma mensagem do tipo "Arquivo enviado com sucesso" o correto era fazer o teste no controller e passar para a view um resultado tipo assim 
$this->view->result = $resultadocontroller....


Espero ter ajudado, vou arrumar meu esquema de cod pq escrever aqui fica maio bizarro hehehe...


Qualquer dúvida estamos ai =]

4 comentários:

  1. O link para donwload esta off, tem como arrumar. Obrigado.

    ResponderExcluir
  2. Legal o post valeu!

    O plugin esta certo... http://www.fyneworks.com/jquery/multiple-file-upload/

    ResponderExcluir
  3. Parabéns ótimo tuto,
    Ajudou bastante, ia fazer uma pohhada de outra coisa e não sabia que o ZEND tinha essa.

    #ZendParaTodos

    ResponderExcluir
  4. Se eu quiser renomear o arquivo entes do upload como faria?

    ResponderExcluir