CarrierWave Gem trong Ruby on Rails

• Khi bạn phát triển một website application , tính năng đăng tải hình ảnh , avatar ... là một tính đăng quan trọng và cần thiết đều có ở phần lớn các webiste .
• Trong phần hướng dẫn này , mình sẽ hướng dẫn các bạn sử dụng gem carrierwave trong ROR(Ruby on Rails).Trong phần này mình sẽ chỉ tập trung vào upload và edit hình ảnh .

* Cài đặt Carrier Gem

• Mở File gem lên và thêm vào như sau :

 ...
 gem 'carrierwave', '~> 0.10.0' // Cung cấp cách cách thức upload ảnh
 gem 'mini_magick', '~> 4.3' // Dùng để thay đổi kích thước hình ảnh 
 ...

• Sau khi thêm , các bạn nhớ hãy bundle install nhé

Chúng ta bắt đầu bắt tay vào làm một ứng dụng nhỏ để đăng tải ảnh .

• Đầu tiên chúng ta tạo một model với câu option scaffold

rails g scaffold Pet name:string description:text image:string
rake db:migrate

• Tiếp theo chúng ta cài đặt carrierwave : Chúng ta phải tạo initializer cho carrierwave , dùng để load CarrierWave sau khi load ActiveRecord. Chúng ta đến đường dẫn config > initializers và tạo một file tên là : carrier_wave.rb. require 'carrierwave/orm/activerecord' Sau đó chúng ta mở terminal lên để tạo uploader

    rails generate uploader Image

Câu lệnh trên sẽ tạo một thư mục mới được gọi là uploader nằm trong thư mục app chứa file image_uploader.rb . Tiếp theo , các mở file image_uploader lên , và uncomment line thứ 7 như sau ( thường là line 7 )

 # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  include CarrierWave::MiniMagick

Và bạn cũng cần uncomment dòng sau để tạo các version khác nhau cho ảnh .

version :thumb do
  process :resize_to_fill => [50, 50]
end

Để bảo mật , bạn cần một white list các file có thể upload , làm như sau :

 def extension_white_list
  %w(jpg jpeg gif png)
end

Lưu ý : tất cả những cấu hình trên đều nằm trong file image_uploader.rb . nhé

Xong phần cấu hình , chúng ta mở pet.rb lên và thêm vào như sau

*app/model/pet.rb*
mount_uploader :image, ImageUploader

Tạo 1 trang view như sau :

*app/views/pets/_form.html.erb*
<%= form_for @pet, html: { multipart: true } do |f| %>
  <% if @pet.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(@pet.errors.count, "error") %> prohibited this pet from being saved:</h2>
 
      <ul>
      <% @pet.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>
 
  <div class="field">
    <%= f.label :name %><br>
    <%= f.text_field :name %>
  </div>
  <div class="field">
    <%= f.label :description %><br>
    <%= f.text_area :description %>
  </div>
  <div class="field">
    <%= f.label :image %><br>
    <%= f.file_field :image %>
    <% if f.object.image? %>
      <%= image_tag f.object.image.thumb.url %>
      <%= f.label :remove_image %>
      <%= f.check_box :remove_image %> 
    <% end %>
  </div>
 
  <div class="actions">
    <%= f.submit %>
  </div>
<% end %>

Đoạn code trên để kiểm tra đã có ảnh chưa, nếu đã có thì sẽ hiễn thị ảnh và có 1 option để xóa ảnh .

Sau đó tạo 1 view để show hình ảnh vừa đăng .

*app/views/pets/show.html.erb*
 
<p id="notice"><%= notice %></p>
 
<p>
  <strong>Name:</strong>
  <%= @pet.name %>
</p>
 
<p>
  <strong>Description:</strong>
  <%= @pet.description %>
</p>
 
<p>
  <strong>Image:</strong>
  <%= image_tag @pet.image.thumb.url %> // thumb là cấu hình version ta tạo ở trên .
  // Hoặc các bạn có thể để như vậy  <%= image_tag @pet.image.url %> // nó sẽ lấy size của ảnh .
</p>
 
<%= link_to 'Edit', edit_pet_path(@pet) %> |
<%= link_to 'Back', pets_path %>

Trong controller của bạn , chỉ cần thêm 1 params là :remove_image .

Vậy là xong , mình ko đề cập đến method edit hay update trong controller , vì những phần đó các bạn cứ làm theo cách bình thường .

Bây giờ các bạn thử reset server và chạy thử những cấu hình trên và xem kết quả

À quên , nếu bạn muốn kiểm tra file upload phải trong mức quy định thì ta có thể cấu hình đơn giản trong file pet như sau :

validates_processing_of :image
validate :image_size_validation
 
private
def image_size_validation
  errors[:image] << "should be less than 500KB" if image.size > 0.5.megabytes
end

Mình xin kết thúc phần hướng dẫn đơn giản của mình về gem carrierwave . Ở phần tiếp theo mình sẽ hướng dẫn về sự kết hợp của carrierwave và devise .

Nguồn : https://code.tutsplus.com/tutorials/rails-image-upload-using-carrierwave-in-a-rails-app--cms-25183