Product with multi image by gem Paperclip

1.Lời nói đầu

Việc đăng nhiều ảnh của 1 sản phẩm lên 1 trang web bán hàng là rất thường gặp vì vậy viết bài này để hướng dẫn cho việc đó.

2. Sử dụng gem

gem "paperclip"
#bundle

Tạo 2 model trong đó có 1 model products có 1 attr là name và 1 model product_images không có attr nào.

rails g paperclip ProductImages image
rake db:migrate:reset

Lệnh rails g paperclip ProductImages image sẽ render ra 1 attr image cho model product_images

class Product < ApplicationRecord
  has_many :product_images, dependent: :destroy
  accepts_nested_attributes_for :product_images,
    reject_if: proc {|attributes| attributes["_destroy"] == "1"}
end

Tạo quan hệ nested attribute và validate cho image

class ProductImage < ApplicationRecord
  has_attached_file :image, styles: {medium: "300x300>", thumb: "100x100>"},
    default_url: "/images/:style/missing.png"
  validates_attachment_content_type :image, content_type: /\Aimage\/.*\z/
end

Ok, tiếp theo chúng ta sẽ build form product với 1 vài product_images bằng nested attributes

#products_controller.rb
  def new
    *@product = Product.new
    *@product.product_images.build
  end

...
#_form.html.erb
<%= f.fields_for :product_images do |product_image_field| %>
  <%= render "product_image_field", f: product_image_field %>
<% end %>
<%= link_to_add_fields "Add other product images", f, :product_images %>
...

#_product_image_field
<%= f.label :image %>
<%= f.file_field :image %>
<%= link_to_remove_fields t(:remove), f %>

build xong form với nested attributes, ta sẽ tiếp tục các bước như nested attribute bình thường

def product_params
  params.require(:product).permit :name, product_images_attributes: [:id, :image, :_destroy]
end

  def create
    *@product = Product.new product_params
    if *@product.save
      flash[:success] = t "admin.add_success", source: "product"
      redirect_to admin_products_path
    else
      load_data
      render :new
    end
  end

Hiển thị toàn bộ ảnh của 1 product

<% *@product.product_images.each do |image| %>
  <%= image_tag image.image %>
<% end %>

3.Kết Luận

Đến đây, phần giới thiệu về gem Paperclip đã hết. Việc cài đặt cũng như sử dụng gem khá là đơn giản. Mong rằng sẽ giúp được các bạn trong project.