Multiple image upload function using Rails Carrierwave

It is described as a memorandum.

Introducing a gem called Carrierwave

carrierwaveuploader/carrierwave

Describe the following in the Gemfile

gem "carrierwave", "~> 2.0"

When finished, at the terminal bi

bundle install

Creating an Uploader

bundle exec rails g uploader Images

The following is created.

images_uploader.rb

I can play around with the settings of the uploaded file, but this time I will not.

MVC settings

Image registration is possible with a model called Memory for the Post model.

Model

Post

post.rb


class Post < ApplicationRecord
  has_many :memories
  accepts_nested_attributes_for :memories, allow_destroy: true
  validates :title, presence: true
end

The accepts_nested_attributes_for: memories setting allows you to register memories on posts_controller.

Memory

memory.rb


class Memory < ApplicationRecord
  belongs_to :post
  mount_uploader :image, ImagesUploader
end

mount_uploader is the carrierwave setting. Now you can easily upload.

Controller

posts_controller.rb

posts_controller.rb


class PostsController < ApplicationController
  

  def new
    @post = Post.new
		# @post.memories.The build is ready to save the memories associated with the post
    @post_memory = @post.memories.build
  end

  def create
    post = Post.new(post_params)
    if post.save!
		#The following is the process to save in memories. Multiple images can be saved with each statement.
      params[:memories][:image].each do |image|
        post.memories.create(image: image, post_id: post.id)
      end
    end
    redirect_to root_path
  end

  private

    def post_params
      params.require(:post).permit(:title, memories_attributes: [:image]).merge(user_id: current_user.id)
    end
end

View

new.html.erb

<%= form_for @post, local: true,  html: {class: "form_area"} do |f| %>
        <div class="form_area__field">
          <%= f.text_area :title, id: "post_text", placeholder: "Enter the posted content", rows: 10%>

          <div class="form_area__image_field">
            <%= f.fields_for :memories do |m| %>
              <%= m.label :image, "image" %>
              <%= m.file_field :image, multiple: true, name: "memories[image][]" %>
              <%= hidden_field :memories, :post_id, value: @post.id %>
            <% end %>
          </div>

          <div class="form_area__hidden_field">
            <%= hidden_field :post, :user_id, value: current_user.id %>
          </div>

          <div class="form_area__action">
            <%= f.submit "Post", class: "form_area__action__btn" %>
          </div>

        </div>
      <% end %>

You can save multiple classes in one post with fields_for.

multiple: true is set to allow multiple images to be posted.

How to display?


<% @post.memories.each do |m|%>
     <%= image_tag m.image.url %>
<% end %>

Can be displayed above.

How to add an image? (Added on January 16, 2021)

Implemented the function to add an image to an article that has already been posted with an image. The result is very simple, but I had a hard time not knowing how to implement it.

function

--If the content of the article is changed, only the article will be changed --Otherwise the image will be added

Controller


def update

    post = Post.find(params[:id])
    #Comparing the article before the update with the article passed as params
    if post.title != params[:post][:title]

      post.update!(post_params)

    else
      post.save!

      params[:memories][:image].each do |image|
        post.memories.create(image: image, post_id: post.id)
      end
    end

    redirect_to root_path
  end

I think it would be better if I could edit the selected image, but this feature is coming again. .. ..

Recommended Posts

Multiple image upload function using Rails Carrierwave
[Rails] How to upload multiple images using Carrierwave
Image upload using CarrierWave ~ Rspec test ~
[Rails] How to upload images using Carrierwave
CarrierWave Upload multiple images
[Rails] Implementation of image enlargement function using lightbox2
Ajax bookmark function using Rails
[Rails] Implement image posting function
[Rails] Implementation of image preview function
[Rails] Voice posting function ~ Cloudinary, CarrierWave
Image upload
[Rails] Manage multiple models using devise gem
[Rails] Create an evaluation function using raty.js
Upload Rails app image file to S3
[Ruby on Rails] Image slideshow using Skippr
How to implement image posting using rails
I implemented the multiple image upload function in Rails so that multiple images can be slid for the post
[Rails] Implementation of search function using gem's ransack
[Rails 6] Implementation of inquiry function using Action Mailer
Create authentication function in Rails application using devise
Image preview function
[Rails 6] Ranking function
Image posting function
[Rails] Introduce Carrierwave
How to implement image posting function using Active Storage in Ruby on Rails
Flow to implement image posting function using ActiveStorage
[Rails] Category function
[Rails] I made a draft function using enum
[Rails] Implementation of image slide show using Bootstrap 3
[Note] Summary of rails login function using devise ①
[Rails] Notification function
How to implement a circular profile image in Rails using CarrierWave and R Magick
[Implementation procedure] Implement image upload function with Active Storage
[Rails] Test of star evaluation function using Raty [Rspec]
[Rails] Implementation of multi-layer category function using ancestry "Preparation"
[Rails] Implementation of multi-layer category function using ancestry "seed"
[Ruby on Rails] Post image preview function in refile
Rails learning How to implement search function using ActiveModel
Try to implement tagging function using rails and js
[Rails] Implement search function
[Rails] Implemented hashtag function
[rails] tag ranking function
Image preview function implementation
Rails search function implementation
[Rails] Implementation of multi-layer category function using ancestry "Editing form"
[Rails API + Vue] Upload and display images using Active Storage
Ruby on Rails Email automatic sending function setting (using gmail)
[Rails] Implementation of tagging function using intermediate table (without Gem)
[Rails] Implement event end function (logical deletion) using paranoia (gem)
[Rails] I tried to implement "Like function" using rails and js
[Rails] Implement community membership application / approval function using many-to-many associations