CarrierWave Upload Multiple Images [2018 Update]
When you are building a web application, you definitely want to add an option for image uploading as well. In this tutorial, we will show you the necessary steps to enable upload multiple images/files using CarrierWave in Rails 4+ from scratch. A similar procedure can be applied for nested forms.
Step 1: In the gem file
CarrierWave is a Ruby gem that provides a simple and extremely flexible way to upload files from Ruby applications. You will need to add these gems to the Gemfile and run bundle install
.
gem 'carrierwave'
Step 2: Setting up CarrierWave
The first step to configure CarrierWave it to run the following command: rails generate uploader Avatar
. This will create a new directory called uploaders in the app folder and a file inside called avatar_uploader.rb.
class AvatarUploader < CarrierWave::Uploader::Base
storage :file
def store_dir
"uploads/#{model.class.to_s.underscore}/#{mounted_as}/#{model.id}"
end
def default_url
"/images/fallback/" + [version_name, "default.png"].compact.join('_')
end
end
store_dir
- You can modify the default directory to change where uploaded files will be stored.default_url
- It is the path to the default image, you can use this image if no other image has been selected.
Step 3: Generate your migrations
You can generate your migrations using Scaffolding in Rails. This will generate a full set of model, views and controller, and a test suite for each of the above. It is the most simple way to get your project up and running.
rails g scaffold post title:string
rails g scaffold post_attachment post_id:integer avatar:string
rake db:migrate
Step 4: Edit Models
Once scaffolding finishes generating the files you can start editing your models.
You want to be able to create post and post_attachment in one go. To do this you need to add the following to post.rb
:
post.rb
class Post < ActiveRecord::Base
has_many :post_attachments
accepts_nested_attributes_for :post_attachments
end
accepts_nested_attributes_for :post_attachments
- Nested attributes allow you to save attributes on associated records through the parent.
The time has come to mount your uploader. Navigate to your PostAttachment model and add mount_uploader :avatar, AvatarUploader
to the file.
post_attachment.rb
class PostAttachment < ActiveRecord::Base
mount_uploader :avatar, AvatarUploader
belongs_to :post
end
Step 5: Modify your Controller
The next step is to modify the post_controller
to accept those new nested attributes.
post_controller.rb
def show
@post_attachments = @post.post_attachments.all
end
def new
@post = Post.new
@post_attachment = @post.post_attachments.build
end
To make sure that post_attachments
is ready to be created once the new post is done, you will need to build it with @post.post_attachments.build
.
def create
@post = Post.new(post_params)
respond_to do |format|
if @post.save
params[:post_attachments]['avatar'].each do |a|
@post_attachment = @post.post_attachments.create!(:avatar => a, :post_id => @post.id)
end
format.html { redirect_to @post, notice: 'Post was successfully created.' }
else
format.html { render action: 'new' }
end
end
end
To help the nested attributes reach the model, you will need to add the following to the post_params method in the PostController.
private
def post_params
params.require(:post).permit(:title, post_attachments_attributes:
[:id, :post_id, :avatar])
end
Step 6: View layout
For the last step to finish out application you will need to edit the view to allow us to upload new images. You can do this by adding the following line:
<%= p.file_field :avatar, :multiple => true, name: "post_attachments[avatar][]" %>
views/posts/_form.html.erb
<%= form_for(@post, :html => { :multipart => true }) do |f| %>
<div class="field">
<%= f.label :title %><br>
<%= f.text_field :title %>
</div>
<%= f.fields_for :post_attachments do |p| %>
<div class="field">
<%= p.label :avatar %><br>
<%= p.file_field :avatar, :multiple => true, name: "post_attachments[avatar][]" %>
</div>
<% end %>
<div class="actions">
<%= f.submit %>
</div>
<% end %>
Thank you for reading!
As we upload new images, we also upload new articles. Subscribe now to stay up-to-date!