Upload ajax multiplo com CakePHP integrado ao CKeditor Artigo

Conheça os cursos gratuitos do WebDevBr! - Inscreva-se!


Este artigo foi publicado a 5 anos, 2 dias atrás.

Este artigo é muito antigo ou seu conteúdo foi descontinuado, com certeza outro artigo foi escrito para substituí-lo, use o campo de pesquisa logo acima e desculpe o incomodo!

Tenho visto muitas pessoas procurando por sistemas de upload de imagens para o CakePHP e eu mesmo tive que procurar algo parecido, porém (pouco exigente eu), precisei de algo que se integrasse também ao CKeditor, sabe aquele botão de inserir imagens, pois é, tinha que ser ajax, envio multiplo e com integrado ao CKeditor. Bom, nem mesmo abri o Google, peguei um papel e uma caneta e comecei a rabiscar o que pensava (isso me ajuda, parece que consigo ver no papel o que estou pensando, e posso voltar a traz e analisar novamente sempre que necessário), cheguei a conclusão que o melhor seria montar uma boa estrutura frontend aonde eu poderia apenas inserir uma classe em um form qualquer e pronto, o tratamento das imagens seria feito pelo CakePHP, o que me possibilitaria ter uma estrutura que eu pudesse mover aonde quisesse (um plugin) e reutilizar sempre. Vamos ao que interessa:

Como instalar o Imgadmin, plugin ajax para envio multiplo e redimensionamento de imagens para CakePHP

Antes de continuar: o plugin não funciona em versões 2.3.x ou superior. 01 - Baixe a versão mais atual do plugin aqui: Imgadmin 02 - Descompacte o plugin na pasta app/Plugin e verifique se o nome está correto, assim: Imgadmin.

Ao final desta etapa você deve estar com a estrutura assim:

Gostou deste artigo?

Receba atualizações semanais com novos artigos do WebDevBr e outras dicas!

caminhoParaCakePHP/app/Plugin/Imgadmin/

  • Config

  • Controller

  • Model

  • View

  • Webroot

Se o seu estiver assim, ok! está correto!

03 - Habilite o plugin em app/Config/bootstrap.php, adicionando no arquivo o seguinte:

CakePlugin::loadAll(array('Imgadmin'=>array('routes' => true)));

Para habilitar todos os seus plugins e apenas o Imgadmin com acesso ao routes, ou para habilitar apenas o Imgadmin

CakePlugin::load(array('Imgadmin'=>array('routes' => true)));

E pronto, está instalado em menos de 5 minutos.

Como usar

Para usar é bem simples, basta adicionar os javascripts e as classes na view, exitem duas formas de ativar o plugin. Mas antes, lembre de adicionar o Jquery:

echo $this->Html->script(array(
  '//ajax.googleapis.com/ajax/libs/jquery/2.0.0/jquery.min.js',
));

E incluir a variável com a "url base" da sua aplicação:

echo $this->Html->scriptBlock('
  "base_url" = "'.$this->webroot.'";
');

Com Ckeditor Para usar com CKeditor basta chamar o Javascript:

echo $this->Html->script(array(
    '/imgadmin/js/ckeditor/ckeditor.js'
));

E no campo (textarea é o preferido), basta adicionar a classe .ckeditor:

echo $this->Form->textarea('texto',array('class'=>'ckeditor'));
//ou
echo $this->Form->input('texto',array('type'=>'textarea','class'=>'ckeditor'));

Pronto, junto ao CKeditor já teremos o botão de imagem que puxa as imagens do servidor (no caso, nosso plugin). Sem CKeditor (direto no input). Neste caso vamos chamar outro javascript que iré transformar nosso input para receber a imagem.

echo $this->Html->script(array(
    'imgadmin/admin.js'
));

Já nos inputs vamos colocar a classe .img-select

echo $this->Form->input('meuInput',array('class'=>'img-select'));

Pronto, neste ponto você já está recuperando o nome das suas imagens enviadas direto no seu input. Recuperando as imagens As imagens enviadas pelo Imgadmin são armazenadas na pasta app/webroot/img/upload e as versões redimensionadas são armazenadas em 5 pastas internas, cada uma em um formato diferente, as pastas são:

*   img
*   full
*   thumb
*   pequeno
*   medio
*   grande

Para recuperá-las na view basta você setar o caminho para estas pastas, por exemplo, você envia a imagem erik.figueiredo.jpg:

//recupera a imagem original
echo $this->Html->imagem('upload/erik.figueiredo.jpg');

//recupera a imagem full
echo $this->Html->imagem('upload/full/erik.figueiredo.jpg');

//recupera a imagem thumb
echo $this->Html->imagem('upload/thumb/erik.figueiredo.jpg');

//recupera a imagem pequeno
echo $this->Html->imagem('upload/pequeno/erik.figueiredo.jpg');

//recupera a imagem medio
echo $this->Html->imagem('upload/medio/erik.figueiredo.jpg');

//recupera a imagem grande
echo $this->Html->imagem('upload/grande/erik.figueiredo.jpg');</pre>

Personalizar tamanho e forma do corte em cada pasta

Você ainda pode, opcionalmente, configurar o Plugin para ajustar suas imagem ao seu gosto adicionando esse código ao seu app/Config/core.php:

Configure::write('Imgadmin', array(
    'full'=>array(
    'largura'=>800,
    'altura'=>600,
    'redimensiona'=>'outside'
  ),
  'thumb'=>array(
    'largura'=>50,
    'altura'=>50,
    'redimensiona'=>'outside'
  ),
  'pequeno'=>array(
    'largura'=>100,
    'altura'=>100,
    'redimensiona'=>'crop'
  ),
  'medio'=>array(
    'largura'=>250,
    'altura'=>250,
    'redimensiona'=>'crop'
  ),
  'grande'=>array(
    'largura'=>500,
    'altura'=>500,
    'redimensiona'=>'crop'
  )
));

Para alterar o tipo de redimensionamento é só escolher uma das opções:

  • resize - Redimensiona a imagem sem se preocupar com as proporções (pode distorcer)
  • inside - Redimensiona a imagem dentro do espaço informado, mantendo a altura e largura dentro dos limites sem tirar a imagem da proporção
  • outside - Redimensiona a imagem ocupando o espaço maximo informado, mantendo a largura e altura ocupando o máximo possível sem tirar da proporção
  • crop - Redimensiona a imagem como outside (acima) e corta os excessos (default) mantendo apenas o centro

Atualizando o ImgAdmin

Bem, este foi o meu primeiro artigo aqui no blog e com o tempo acabou ficando desatualizado, por isso eu atualizei hoje o CKEditor para a versão mais recente (1/06/2014), mas se você mesmo precisar atualizar o CkEditor e o PlUpload vai precisar tomar um pouco de cuidado com o primeiro (CkEditor), lembre-se de manter um backup do atual, você pode acrescentar o atualizado aonde quiser, no plugin, no webroot ou em um tema qualquer, mas no arquivo config.js (logo na raiz do CKEditor) você precisa acrescentar uma linha qua vai ativar o gerenciador de imagens nele:

config.filebrowserImageBrowseUrl = base_url+'imgadmin/Imagens/add';

Aqui eu precisei limpar o cache do navegador 2 vezes antes de finalmente funcionar a alteração.

Resolvendo o I/O error. (Error #2038)

O I/O error. (Error #2038) é o resultado de um erro 500 no PHP e a primeira coisa que vem na minha cabeça é falta de permissão no diretório img (dentro de app/webroot) ou limite de upload no PHP.

Conclusão

Pronto, você já está enviando imagens com o CakePHP e o CKEditor sem ter que se preocupar com funções complicadas. Espero que continue sendo útil, assim como foi no último ano.


Cursos relacionados


* Parcelamento apenas cartão de crédito! Pode haver uma pequena variação no parcelamento em relação a simulações apresentadas!