Send images in api with carrierwave-base64

Carrierwave đã không còn xa lạ gì đối với các lập trình viên RoR, nó hổ trợ upload file một cách dễ dàng hơn giữa client(browser) và server. Hôm này mình xin hướng dẫn cách upload image khi dùng API với gem carierwave-base64 Ví dụ: Mình cần update image cho thuộc tính Avatar của đối tượng User 1.Cài đặt Trong file Gemfile cần thêm vào

    gem "carrierwave-base64"

Sau đó chạy bundle install để cài đặt và restart lại server 2.Thêm uploader Nếu trong model User đả có sử dụng uploader khi dùng gem carrierwave thì chúng ta có thể dùng chung uploader này còn nếu chưa có thì dùng lệnh sau để tạo ra nó

    rails generate uploader Avatar

sau đó thêm vào model User như sau

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

3. Tùy chọn nâng cao cho uploader

class AvatarUploader < CarrierWave::Uploader::Base
    #Thay đổi nơi lưu trữ
  def store_dir
    'public/my/upload/directory'
  end
  
  #Giới hạn các định dạng file cho phép
  def extension_white_list
    %w(jpg jpeg gif png)
  end
  
  #Giới hạn kích thước hình ảnh(sử dụng thêm gem MiniMagick)
  include CarrierWave::MiniMagick

  process resize_to_fit: [800, 800]
  
  #Thêm versions cho thuộc tính avatar (thêm gem Imagemagick và MiniMagick)
  version :mini do
    process resize_to_fill: [200,200]
  end
  #Để lấy version mặc định là dùng User.avatar.url và lấy version mini ta dùng User.avatar.mini.url. Tương tự như vậy ta có thể tạo nhiều version với các kích thước khác nhau
end

4.Sử dụng Rất đơn giản, bây giờ trong json từ clinet gửi lên, image chỉ cần convert thành dạng mã base64 và gắn kèm vào thuộc tính avatar trong json là xong vậy là xong. Ví dụ mình có đoạn json tạo mới User như sau

{
  "User":
  {
    "name": "Nguyen Van A",
    "email": "abc@gmail.com",
    "'password": "123456",
    "avatar": "data:image/png;base64,(<base64 encoded data>)"
  }
}

thay mã base64 sau khi convert của image vào <base64 encoded data> thế là xong

Bài viết không thể tránh khỏi thiếu sót mình rất mong nhận được sự góp ý và phản hồi của các bạn.

Tài liêu tham khảo: https://github.com/carrierwaveuploader/carrierwave