Giới thiệu về gem Paperclip

1. Tổng quát

Là 1 người lập trình web chắc hẳn chúng ta cũng khá quen thuộc với việc upload ảnh hoặc file. Trong rails có rất nhiều gem hỗ trợ công việc này như Paperclip, CarrierWave... Mỗi gem đêu có điểm mạnh yếu riêng, nhưng tôi hay sử dụng paperclip, vì vậy trong khuôn khổ bài viết này tôi sẽ giới thiệu về gem Paperclip và sử dụng nó trong 1 project đơn giản. PaperClip khá mạnh trong việc upload cũng như thao tác với ảnh. Ở phiên bản hiện nay, Paperclip yêu cầu phiên bản Ruby => 2.0.0 và Rails => 3.2.

2. Cài đặt

Muốn sử dụng được gem này thì trước hết chúng ta cần phải cài đặt ImageMagick. ImageMagick là backend tool của paperclip. Bạn có thể tìm và tải các phiên bản của ImageMagic ở link sau: http://www.imagemagick.org/script/binary-releases.php Tiếp theo, thêm gem Paperclip vào Gemifle

gem "paperclip"

sau đó là bundle

bundle install

Paperclip đã được cài đặt và sẵn sàng sử dụng

3. Sử dụng

3.1 Tạo model

Chúng ta sẽ thêm model mới bằng lệnh:

 $ rails g model Post title:string body:string image:attachment

Dòng lệnh trên, tôi sẽ tạo model Post, có thể upload ảnh trong mỗi post. Sau khi lệnh trên sẽ tạo các trường cần thiết để làm việc với paperclip. 4 trường đó là:

image_file_name # Các tên tập tin gốc của hình ảnh.
image_content_type # Loại đinh dạng ảnh.
image_file_size # Kích thước ảnh.
image_updated_at # Thời gian cập nhật ảnh.

Trong trường hợp với 1 model có sẵn, ta muốn thêm paperclip thì ta có thể làm như sau: Chạy lệnh

 $ rails g migration AddPaperclipToPost

Chạy xong lệnh nó sẽ sinh ra 1 file migrate, ta sẽ sửa file đó như sau:

 class AddPaperclipToPost < ActiveRecord::Migration
  def up
    add_attachment :posts, :image
  end

  def down
    remove_attachment :posts, :image
  end
end

Chạy lại migrate.

3.2 Thêm Paperclip Support vào model

Trong model Post ta thêm đoạn code sau:

has_attached_file :image, styles: { small: "64x64", med: "100x100", large: "200x200" }

Trong style, chúng ta sẽ thiết lập kích thước của ảnh sẽ lưu vào server. Ngoài ra ta cũng có thể kiểm tra file upload bằng cách thêm đoạn code:

 # Yêu cầu phải chọn ảnh
 validates :image, attachment_presence: true
 # Kiểm tra kích thước ảnh
 validates_attachment :image, size: { in: 0..100.kilobytes }
 # Kiểm tra loại ảnh
 validates_attachment :image, content_type: { content_type: "image/jpg" }

 # Ta cũng có thể gộp 3 điều kiện trên:
 validates_attachment :image, presence: true,
  content_type: { content_type: "image/jpg" },
  size: { in: 0..100.kilobytes }

3.3 Sử dụng trong view

Trong phần view, ta cần thêm html: { multipart: true } vào form_tag:

 #app/view/posts/new.html.erb
 <%= form_for @post, html: { multipart: true } do |f| %>
  <div>
    <%= f.label "Title"%>
    <%= f.text_field :title %>
  </div>

  <div>
    <%= f.label "Body"%>
    <%= f.text_field :body %>
  </div>

  <div>
    <%= f.label "Image"%>
    <%= f.file_field :image %>
  </div>

  <%= f.submit "Submit" %>
<% end %>

Ngoài ra khi muốn upload nhiều file ta thêm multiple: true vào file_field

 <%= f.file_field :image, multiple: true %>

CÒn khi muốn hiển thị ảnh đã upload ta dùng như sau:

 <%= link_to image_tag(@post.image.url(:med)), @post.image.url %>

4. Kết luận

Đến đây, tôi đã giới thiệu xong về gem Paperclip. 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.

5. Tài liệu tham khảo

https://github.com/thoughtbot/paperclip

https://richonrails.com/articles/getting-started-with-paperclip

Link source code bạn có thể xem tại đây