Home
O CarrierWave é uma gem muito popular em tarefas de upload de arquivos. Vou demonstrar aqui um passo a passo com um exemplo de carregamento, validação e pós-processamento de imagens. Esse post foi elaborado tendo em vista as versões mais recentes do Rails (5.xx) e CarrierWave (1.x) neste momento. Apesar deste post abordar um caso de uso específico com formatos de imagens, o CarrierWave pode ser utilizado para qualquer tipo de arquivo. Neste exemplo, os arquivos serão armazenados localmente. Em um post futuro demonstrarei como armazená-los usando um serviço de nuvem, como o Amazon S3.
Passo 1: O Image Uploader
No seu projeto Rails 5, siga os passos abaixo para gerar o uploader:
1. No seu gemfile, adicione a gem ‘carrierwave’ e execute o comando bundle.
2. O CarrierWave opera através dos uploaders. Um Uploader é uma classe em Ruby que herda de um dos helpers internos do CarrierWave. Ele é responsável por todo o processo desde salvar o arquivo até o pós-processamento da imagem. Execute o generator para criar um Uploader para a imagem:
|
1 |
$ rails g uploader image |
Isso vai criar uma pasta “app/uploaders” e lá vai conter o seu arquivo image_uploader.rb. Você pode alterá-lo para fazer as customizações necessárias, mas vamos voltar nisso depois.
3. Nós adicionamos ou “montamos” o image_uploader no nosso model. Supondo que em minha aplicação eu queria adicionar um avatar ao usuário do sistema (classe User):
- Primeiro, adicionamos um atributo do tipo string ao model para armazenar a referência:
|
1 2 |
$ rails g migration AddImageToUser image:string $ rails db:migrate |
- Adicionamos o image_uploader à nossa classe, e passamos o nome do atributo que acabamos de criar junto com a classe do uploader, dessa forma:
|
1 2 3 |
class User < ApplicationRecord mount_uploader :image, ImageUploader end |
4. Para permitir o acesso ao atributo criado na hora de submeter os formulários, precisamos adicioná-los ao strong params no controller:
|
1 2 3 |
def user_params params.require(:user).permit(:name, :image) end |
5. Neste ponto a parte do backend está basicamente pronta. Agora vamos alterar a interface do usuário, no formulário. O form_for do Rails vem com um tipo de campo file_field, que vamos utilizar para enviar a imagem ao servidor. Adicione o campo ao seu formulário como o exemplo abaixo:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 |
<%= form_for @user do |f| %> <div class="field"> <%= f.label :name %> <%= f.text_field :name %> </div> <div class="field"> <%= f.label :image %> <%= f.file_field :image %> </div> <% end %> |
6. Agora, para exibir a imagem na nossa view (neste caso, no show.html.erb):
|
1 |
<%= image_tag(@user.image_url.to_s) %> |
O método image_url é um dos métodos de instância da classe Uploader e retorna o caminho do arquivo carregado.
7. Passando para a etapa de validação, é importante se certificar que apenas formatos de imagem serão aceitos. Isso previne, além de um comportamento inesperado da aplicação, possíveis tentativas de ataque através da injeção de vulnerabilidades. No arquivo image_uploader.rb nós vamos adicionar um método de whitelist (lista branca) com as extensões de arquivos permitidas. Na verdade, elas já vem no arquivo padrão, mas estão comentadas. Remova os comentários:
|
1 2 3 |
def extension_white_list %w(jpg jpeg gif png) end |
Isso é o básico para que sua aplicação permita o upload de imagens.
Passo 2: A thumbnail (miniatura)
Com o Uploader devidamente configurado, você pode começar a aprimorar o processamento do arquivo de acordo com as necessidades da aplicação. Nesse exemplo, além da imagem enviada pelo usuário, pode ser interessante gerar uma thumbnail que possui um arquivo menor e utiliza menos banda para a transferência.
1. Abra o arquivo image_uploader.rb, remova os comentários das linhas abaixo e ajuste a largura/altura para valores de sua preferência:
|
1 2 3 |
version :thumb do process :resize_to_fit => [50, 50] end |
Um método ‘version’ do uploader utiliza um método ‘process’ a ser aplicado no arquivo. Os métodos de processamento providos, tais como resize_to_fit são na verdade de outras gems: RMagick e MiniMagick. Neste caso optei pela MiniMagick simplesmente pelo menor consumo de memória. De qualquer forma, você pode escolher a que vai utilizar e alternar entre elas comentando/descomentando as linhas abaixo:
|
1 2 3 4 |
class Image Uploader < CarrierWave::Uploader::Base # include CarrierWave::RMagick include CarrierWave::MiniMagick end |
Ambos as duas opções precisam de um programa chamado ImageMagick para executar. Cheque se ele está instalado executando:
|
1 |
$ convert -version |
Caso não esteja, pode obtê-lo pelo apt-get:
|
1 |
$ sudo apt-get install imagemagick |
2. Adicione a gem ao seu gemfile:
|
1 2 |
gem 'carrierwave' gem 'mini_magick' |
Execute o bundle e reinicie o servidor.
3. Na view onde você gostaria de exibir a thumbnail em vez da própria imagem, você pode passar um parâmetro para o método dessa forma:
|
1 |
<%= image_tag(@user.image_url(:thumb).to_s) %> |
4. Neste ponto, as imagens que você carregou antes não irão conter thumbnails, porque essa geração faz parte do processamento do arquivo no upload.
Referências:
- Rails 5 and CarrierWave
- Rails docs no upload de arquivos
- O Railscast de CarrierWave de Ryan Bates (está um pouco desatualizado, mas tem uma boa noção geral).
- CarrierWave docs e wiki
1 Comentário
Sannytet
12 de dezembro de 2018 at 01:51Nice posts! 🙂
___
Sanny