Xin chào tất cả các bạn, hôm nay mình xin giới thiệu một chủ đề đó là upload ảnh cho app dùng gem carrierwave.

Bước 1: Cài đặt. Các bạn thêm vào Gemfile như sau:

gem 'carrierwave'

Sau đó chạy trên terminal:

bundle install

Bước 2: Cấu hình để up ảnh, chạy câu lệnh tạo ra tệp upload ảnh:

rails generate uploader Avatar #"Avatar" thường để trùng với

tên trường ảnh của class

Ví dụ image -> Image

Hệ thống sẽ sinh ra cho các bạn file trong folder uploads với tên và đường dẫn là app/uploaders/avatar_uploader.rb với nội dung:

class AvatarUploader < CarrierWave::Uploader::Base
  storage :file
end

Ví dụ ở bài này mình dùng class là User với trường avatar, trong model user.rb mình thêm như sau:

class User < ActiveRecord::Base
  mount_uploader :avatar, AvatarUploader
end

Sau đó ở view thêm như sau:

<%= form.file_field :avatars, multiple: true %>

multiple: true để bạn có thể up nhiều ảnh 1 lúc

nếu như vậy params trong controller của bạn phải là

avatars: [] thay vì :avatar

Và như vậy bạn đã có thể upload ảnh, cụ thể là avatar cho user.

Vấn đề của nhiều bạn mới lập trình rails hay dùng server free như heroku,... sẽ bị xóa ảnh sau khi upload lên 1 thời gian, vậy làm như nào để có thể upload ảnh mà không lo bị xóa? Rất đơn giản, các bạn hãy sử dụng server trung gian để up ảnh.

Mình xin giới thiệu gem cloudinary. Để cấu hình thêm vào Gemfile:

gem "cloudinary" #vẫn phải có gem carrierwave

Sau đó thêm vào app/uploaders/avatar_uploader.rb

class AvatarUploader < CarrierWave::Uploader::Base
  include Cloudinary::CarrierWave
end

Và thay vì show ảnh bằng image_tag thì các bạn đổi thành

<%= cl_image_tag ... %>

Khi đó link sẽ hiểu là

http://res.cloudinary.com/demo/image/upload/...

Và để có thể được như vậy các bạn cần đăng kí tài khoản trên trang chủ http://cloudinary.com, xác nhận mail để có thể up ảnh mà không bị block.

Create file config/initializers/cloudinary.rb với nội dung:

Cloudinary.config do |config|
  config.cloud_name = ...#Cloud name
  config.api_key = ...#API Key
  config.api_secret = ...#API Secret
  config.cdn_subdomain = true

end

Các ... trên trang chủ khi tạo app các bạn đã có sẵn (khi create lưu ý cloud trường cloud name để đặt cho đẹp và không bị trùng =)) ).

Và như vậy các bạn có thể upfile an toàn không lo bị xóa.

Chúc các bạn một ngày làm việc vui vẻ.