File Uploads using Paperclip in Rails 5

In this article, we will get the paperclip to work with Rails 5. Install imagemagick, for Mac download the installer. Create controllers for categories and products.

rails g controller categories
rails g controller products

Create category and product models.

rails g model category name
rails g model product name price:decimal category:references description:text

Declare the associations. Category has many products and product belongs to category. Copy the script to populate sample data to seeds.rb. Migrate the database and populate the database.

rails db:migrate
rails db:seed

Add paperclip gem to the Gemfile.

gem "paperclip", "~> 5.0.0.beta1"

Run bundle.Use the paperclip in the product model.

has_attached_file :photo

Run the migration generator for paperclip related fields in the product model.

rails g paperclip product photo

This generates the following migration file.

class AddAttachmentPhotoToProducts < ActiveRecord::Migration
  def self.up
    change_table :products do |t|
      t.attachment :photo
    end
  end

  def self.down
    remove_attachment :products, :photo
  end
end

Migrate the database. Look at the schema.rb to see the new columns for the products table.

t.string   "photo_file_name"
t.string   "photo_content_type"
t.integer  "photo_file_size"
t.datetime "photo_updated_at"

Add the multipart to the product form partial.

<%= form_for @product, html: { multipart: true } do |f| %>
...
  <p>
    <%= f.file_field :photo %>
  </p>
  <p><%= f.submit "Submit" %></p>
<% end %>

You will get the error:

Paperclip::Errors::MissingRequiredValidatorError 

To fix this, add validation to product model:

validates_attachment_content_type :photo, :content_type => ["image/jpg", "image/jpeg", "image/png", "image/gif"]

If you get the error:

Could not run the `identify` command. Please install ImageMagick.

Open a new terminal if you are using the terminal that was started before you installed ImageMagick. Now, you can upload a new image for a product in the edit form. Add:

<%= image_tag @product.photo.url %>

to product show page. You can now view the image in the product show page. You can change the size of the image by passing in :thumb or :medium.

<%= image_tag @product.photo.url(:thumb) %>

Reload to see the thumbnail size image.

<%= image_tag @product.photo.url(:medium) %>

The thumb and medium size works because it is declared in has_attached_file in the product model. You can copy the views for category, layout and products for the code repository for this article. Product form partial looks like this:

<%= form_for @product, :html => { :multipart => true } do |f| %>
  same as before
  <p>
    <%= f.file_field :photo %>
  </p>
  <p><%= f.submit "Submit" %></p>
<% end %>

The product show page looks like this:

<%= image_tag @product.photo.url(:small) %>

For more customization options, read the docs at https://github.com/thoughtbot/paperclip. You can download the source code for this article from https://github.com/bparanj/pcl.ip.

Summary

In this article, you learned how to use paperclip with Rails 5 apps.


Related Articles

Watch this Article as Screencast

You can watch this as a screencast File Uploads using Paperclip in Rails 5


Software Compatibility Best Practices

I spoke to some of the most talented and experienced software developers. I have created a guide that is filled with valuable insights and actionable ideas to boost developer productivity.

You will gain a better understanding of what's working well for other developers and how they address the software compatibility problems.

Get the Guide Now