Fazendo upload de imagem e múltiplos anexos usando CarrierWave

Introdução 🙂

É muito comum você precisar fazer o upload de fotos ou múltiplos anexos em suas aplicações Web e o Rails fornece Gems que facilitam muito esse processo.

O que vamos aprender?

Nesse tutorial nós vamos usar o CarrierWave + Bootstrap + Simple Form para criar uma página que servirá para fazer o Upload de uma foto e de múltiplos anexos, vamos aprender também como limitar o upload de arquivos baseado na extensão.

INGREDIENTES
Objetivos

Criar um Form para fazer o upload de uma foto e de múltiplos anexos simulando uma página de perfil de um usuário (necessidade comum nos Web Apps).

Passo a Passo
  1. Criar a estrutura do nosso Projeto
  2. Criar os Uploaders e personalizá-los pra limitar o upload por tipo de extensão e separar por vários tamanhos de imagem.
  3. Personalizar nossos Views para subir os arquivos e depois mostrá-los
Mãos à Obra \o/
Parte 1 – Criando a estrutura do Projeto

Primeiro vamos criar nosso projeto Rails, instalar as dependências, incluir as Gems e criar o scaffold User para guardar os dados do usuário.

  1. Para começar, rode no seu console o comando para gerar o projeto:
  2. Nós precisamos instalar o imagemagick no sistema:
    • Em sistemas linux que usem o apt-get, rode:
    • No Mac:
  3.  No seu Gemfile, adicione as seguintes Gems:
  4. Vamos rodar o Bundle para instalar as Gems:
  5. Nós estamos usando nesse tutorial o PostgreSQL como banco de dados para poder usar o tipo “json” do banco de dados que será útil para conectar os múltiplos anexos facilmente, então configure as credenciais do seu banco de dados no arquivo ‘config/database.yml’.
  6. Vamos instalar o Bootstrap para dar uma aparência melhor à nossa aplicação:
    • Substitua o conteúdo do arquivo ‘app/assets/stylesheets/application.css’ pelo seguinte código:

      Seu arquivo deve ficar dessa maneira:
      captura-de-tela-de-2016-11-26-20-35-53
    • Renomeie o arquivo app/assets/stylesheets/application.css’ para app/assets/stylesheets/application.scss’
    • Adicione no arquivo ‘app/assets/javascripts/application.js’ o seguinte  código após a linha //= require jquery:

      Seu código deve ficar como a baixo:
      carrierwave
  7. Vamos instalar agora o Simple Form passando o parâmetro do bootstrap para que nosso form já seja gerado responsivo:
  8. Agora vamos criar o Scaffold, rode no console:
  9. Crie o banco de dados e rode as migrations, no console rode:
  10. Acesse seu projeto no browser http://localhost:3000/users e veja seu scaffold criado.

Pronto \o/, nosso projeto foi criado, agora vamos criar os Uploaders.

Parte 2 – Criar os Uploaders

Agora nós vamos criar dois perfis de Uploaders, incluí-los no User e customizá-los.

  1. Vamos criar o perfil para nossas imagens, rode:
  2. Agora inclua o avatar no nosso model User:

  3. Agora vamos configurar o Uploader Avatar para impedir que arquivos que não sejam jpg, gif ou png sejam aceitos pelo servidor, no arquivo ‘app/uploaders/avatar_upload.rb’ substitua o conteúdo por esse código:
  4. Vamos criar o perfil para nossos anexos:
  5. Inclua os documents (anexos) no nosso model User, para isto rode:

  6. Agora vamos configurar o Uploader Documents, no arquivo ‘app/uploaders/document_upload.rb’ substitua o conteúdo por esse código:
  7. Vamos adicionar ao app/model/user.rb à conexão com nossos uploaders, no arquivo inclua:
  8. Vamos rodar as migrations:
  9. Inclua no arquivo ‘config/envoriment.rb’ o seguinte código:

    Seu código deve ficar assim:
    captura-de-tela-de-2016-11-26-19-32-25
Parte 3 – Personalizar as Views para subir a foto e os múltiplos anexos

Finalmente vamos editar nossas Views para poder fazer o Upload da foto e dos múltiplos anexos ao nosso projeto.

  1. Vamos adicionar ao form que foi gerado no scaffold os campos de photo e documentos, no file ‘app/views/users/_form.html.erb’ substitua o código por:
  2. Edite seu User Controller (‘app/controllers/user_controller.rb’) para receber seus arquivos, para fazer isto altere seu método users_params para que ele fique da seguinte maneira:
  3. Agora vamos incluir na view app/views/user/show.html.erb as tags rails para mostrar o avatar que fizemos o upload e também os documentos. Substitua o conteúdo do arquivo pelo seguinte:

  4. Agora abra o browser e visite http://localhost/users.
  5. Crie um novo usuário passando um first_name, last_name, email, um avatar (photo) e vários arquivos no campo documents.
  6. Agora você vai ser redirecionado pro método show e vai poder ver as fotos em vários tamanhos e também os links para todos os documentos que você subiu.
  7. \o/ Parabéns nós conseguimos subir nossos arquivos.
CONCLUSÃO

O CarrierWave é uma Gem bem prática e te dá muita flexibilidade na hora de subir seus arquivos, então se você precisa implementar essa função no seu APP, esse pode ser um bom caminho para fazer isto.
Com a solução apresentada já é possível você cobrir grande parte dos casos de uso de upload de fotos e anexos mas caso você precise subir arquivos para uma Api Rails você pode usar a Gem Carrier Base 64 para fazer isso facilmente.
Com essa Gem você pode também subir os arquivos diretamente para o S3 da AWS e ter maior segurança por guardar as imagens na nuvem.

Como de costume o Código completo da aplicação está no Github, caso você queria clonar o código, clique aqui. Aproveita e me segue lá \o/

Se você ficou com dúvidas ou tem sugestões de posts para o Blog comenta aí em baixo ou me adiciona no Facebook clicando aqui.

Muito Obrigado,
Sua presença aqui é uma honra para mim,
Leonardo Scorza :)[:]

novembro 27, 2016
Feito com s2 por OneBitCode
%d blogueiros gostam disto: