File Upload using Carrierwave in Rails 5.1

In this article, we will use Carrierwave 1.1.0 for file upload in Rails 5.1.

Create .railsrc in your home folder.

--skip-spring

You can specify the options provided by rails help command in .railsrc file and these options will be used when you create a new rails project.

rails new cwave

Add the gem to Gemfile.

gem 'carrierwave', '~> 1.0'

Run:

bundle

Generate the file uploader:

rails generate uploader Image

The generated file uploader in uploads directory:

class ImageUploader < CarrierWave::Uploader::Base

  # Include RMagick or MiniMagick support:
  # include CarrierWave::RMagick
  # include CarrierWave::MiniMagick

  # Choose what kind of storage to use for this uploader:
  storage :file

  # Override the directory where uploaded files will be stored.
  # This is a sensible default for uploaders that are meant to be mounted:
  def store_dir
    "uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
  end
end

Generate the model with field for file upload called image.

rails g model product name image

Migrate the database:

rails db:migrate

You can now make the product model use the image uploader:

class Product < ApplicationRecord
  mount_uploader :image, ImageUploader
end

The form partial:

<%= form_with(model: product, local: true, :html => {multipart: true}) do |form| %>
  <% if product.errors.any? %>
    <div id="error_explanation">
      <h2><%= pluralize(product.errors.count, "error") %> prohibited this product from being saved:</h2>
      <ul>
      <% product.errors.full_messages.each do |message| %>
        <li><%= message %></li>
      <% end %>
      </ul>
    </div>
  <% end %>

  <div class="field">
    <%= form.label :name %>
    <%= form.text_field :name, id: :product_name %>
  </div>

  <div class='field'>
    <%= form.file_field :image %>
  </div>

  <div class="actions">
    <%= form.submit %>
  </div>
<% end %>

The new page:

<h1>New Product</h1>

<%= render 'form', product: @product %>
<%= link_to 'Back', products_path %>

The show page:

<p id="notice"><%= notice %></p>
<p>
  <strong>name:</strong>
  <%= @product.name %>
</p>

<%= image_tag @product.image_url %>

The index page:

<p id="notice"><%= notice %></p>
<h1>Products</h1>
<table>
  <thead>
    <tr>
      <th>name</th>
      <th colspan="3"></th>
    </tr>
  </thead>
  <tbody>
    <% @products.each do |product| %>
      <tr>
        <td><%= product.name %></td>
      </tr>
    <% end %>
  </tbody>
</table>
<br>
<%= link_to 'New Product', new_product_path %>

You will now be able to upload images when you create the product.


Related Articles


Ace the Technical Interview

  • Easily find the gaps in your knowledge
  • Get customized lessons based on where you are
  • Take consistent action everyday
  • Builtin accountability to keep you on track
  • You will solve bigger problems over time
  • Get the job of your dreams

Take the 30 Day Coding Skills Challenge

Gain confidence to attend the interview

No spam ever. Unsubscribe anytime.