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 in Rails 4+ from scratch. A similar procedure can be applied for nested forms. enable upload multiple images/files using CarrierWave Step 1: In the gem file is a 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 CarrierWave Ruby gem install bundle gem 'carrierwave' Step 2: Setting up CarrierWave The first step to it to run the following command: configure CarrierWave rails uploader Avatar generate This will create a new directory called uploaders in the app folder and a file inside called avatar_uploader.rb. storage + [version_name, ].compact.join( ) < CarrierWave::Uploader:: class AvatarUploader Base :file def store_dir "uploads/ / / " #{model. .to_s.underscore} class #{mounted_as} #{model.id} end def default_url "/images/fallback/" "default.png" '_' end end - You can modify the default directory to change where uploaded files will be stored. store_dir - It is the path to the default image, you can use this image if no other image has been selected. default_url Step 3: Generate your migrations You can generate your migrations using . 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. Scaffolding in Rails 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 in one go. To do this you need to add the following to : create post and post_attachment `post.rb` post.rb has_many accepts_nested_attributes_for < ActiveRecord::Base class Post :post_attachments :post_attachments end - allow you to save attributes on associated records through the parent. `accepts_nested_attributes_for :post_attachments` Nested attributes The time has come to mount your uploader. Navigate to your PostAttachment model and add to the file. `mount_uploader :avatar, AvatarUploader` post_attachment.rb mount_uploader , AvatarUploader
       belongs_to < ActiveRecord::Base class PostAttachment :avatar :post end Step 5: Modify your Controller The next step is to modify the to accept those new nested attributes. `post_controller` post_controller.rb @post_attachments = @post.post_attachments.all @post = Post.new
  @post_attachment = @post.post_attachments.build def show end def new end To make sure that is ready to be created once the new post is done, you will need to build it with . `post_attachments` `@post.post_attachments.build` @post = Post.new(post_params)
       respond_to @post.save
           params[ ][ ].each @post_attachment = @post.post_attachments.create!( => a, => @post.id) format.html { redirect_to @post, } format.html { render } def create do |format| if :post_attachments 'avatar' do |a| :avatar :post_id end notice: 'Post was successfully     created.' else action: 'new' end end end To help the nested attributes reach the model, you will need to add the following to the method in the PostController. post_params private params. ( ).permit( , [ , , ]) def post_params require :post :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: true, name:     "post_attachments[avatar][]" %> < , => %= p.file_field :avatar :multiple views/posts/_form.html.erb { :multipart => true }) do |f| %> true, name:     "post_attachments[avatar][]" %> < (@ , => %= form_for post :html < = > 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 </ > div < %> % end < = > div class "actions" < %> %= f.submit </ > div < %> % end Thank you for reading! Previously published at https://kolosek.com/carrierwave-upload-multiple-images/

Read My Stories

Too Long; Didn't Read

In your car, at home, or at work — Bosch technology shapes many areas of life.

CarrierWave Upload Multiple Images

Too Long; Didn't Read

Nesha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

CarrierWave Upload Multiple Images

Too Long; Didn't Read

Nesha

About Author

TOPICS

THIS ARTICLE WAS FEATURED IN...

RELATED STORIES