quarta-feira, 14 de maio de 2014

Image upload (upload de imagens em tempo real) - Uploadify X JQuery file upload

Uploadify 

JQuery file uploader

Hoje gostaria de falar um pouco sobre a utilização do uploadify versus o JQuery file upload.

   Esta semana ao trabalhar em um projeto de uma agenda de tarefas para um cliente, na visualbox, tive a ideia de incorporar ao sistema uma solução para fazer upload de imagens de usuários em tempo real, onde não fosse necessária aquele velho método de ter que salvar o formulário, para depois os dados e a foto do mesmo fosse carregada no site.
   Primeiramente pensei em criar todo o código no zero, mas então, lembrei do nosso querido JQuery e suas tantas funções maravilhosas!!
   Ao pesquisar na internet, descobri o muito fácil de utilizar uploadify e comecei o processo de incorpora-lo ao código do sistema, porém ao realizar os testes necessários pude perceber, com certa tristeza, que ele somente é compatível com o chrome, em outros navegadores, como o firefox, opera, internet explorer (digo de passagem que este não me surpreendeu muito que não tivesse compatibilidade, rsrs) a função simplesmente não funcionava. Além deste fato, ao utilizar SESSIONs, as varáveis estavam sendo destruídas no servidor, descobri também que o uploadify as estava destruindo pelo fato dele trabalhar com flash.
   Voltando novamente a pesquisar no google por possíveis soluções, descobri que muitos estavam passando pelo mesmo problema.
   Acabei por abandonar sua utilização, pois hoje em dia utilizar tecnologias que somente funcionem em apenas um navegador é totalmente impraticável.
   Buscando novamente na internet descobri o JQuery file upload, também tão prático quanto o primeiro, diferente apenas pelo fato de ser cross-browser e não atrapalhar minhas queridas SESSIONs.
   Então fica essas dica de hoje, quanto a utilização do JQuery file upload, seguem abaixo os links do site demo e do projeto no GitHub respectivamente:

Para finalizar fica outra dica de certas noções básicas do código:
No script chamado fileUploader.php, modifique as seguintes variáveis:

  1. "upload_dir"
    Responsável pelo local onde o arquivo será guardado, modifique o texto após este valor dirname($this->get_server_var('SCRIPT_FILENAME')), para a pasta onde você gostaria salvar as imagens, mas lembrando que este caminho será relativo onde estiver guardado o script fileUploader.php.
  2. "upload_url"
    Responsável pelo link criado na página quando você estiver utilizando o renderizador da imagem carregada, ao finalizar o upload da imagem, um link será criado com um preview da imagem e esta variável apontará para este caminho definido por esta variável.
Caso queira alterar o nome do arquivo que esta salvando no servidor, localize a function "trim_file_name" e antes que a mesma retorne o valor $name, altere-o para o nome que quiser, lembrando de manter a extensão original do arquivo.

Pronto, esta é a dica de hoje, espero ter ajudado, para que não precisem procurar pela internet toda por uma solução parecida.