Save and display multiple images

What you want to implement

The image mounting function has already been implemented, and multiple photos can be saved and displayed.

1. Change model association

Change before

class Scene < ApplicationRecord
  belongs_to :user
  has_one_attached :image

abridgement

end

After change

class Scene < ApplicationRecord
  belongs_to :user
  has_many_attached :images

abridgement

end

2. Change controller

Change before

class ScenesController < ApplicationController

  def new
    @scene = Scene.new
  end

  def create
    @scene = Scene.new(scene_params)
    if @scene.save
      redirect_to root_path
    else
      render :new
    end
  end
  def show
    @scene = Scene.find(params[:id])
  end

  private
  def scene_params
    params.require(:scene).permit(:name, :user_name, :comment, :image).merge(user_id: current_user.id)
  end
end

After change

class ScenesController < ApplicationController

  def new
    @scene = Scene.new
  end

  def create
    @scene = Scene.new(scene_params)
    if @scene.save
      redirect_to root_path
    else
      render :new
    end
  end
  def show
    @scene = Scene.find(params[:id])
  end

  private
  def scene_params
    params.require(:scene).permit(:name, :user_name, :comment, image: []).merge(user_id: current_user.id)
  end
end

3. Change view

Post page

Change before

  <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
Site image
        <span class="indispensable">Mandatory</span>
      </div>
      <div class="click-upload">
        <p>
Click to upload file
        </p>
          <%= f.file_field :image, id:"item-image"%>
      </div>
    </div>
abridgement
<% end %>

After change

 <%= form_with model: @scene, local: true do |f| %>
   <div class="img-upload">
      <div class="weight-bold-text">
Site image
        <span class="indispensable">Mandatory</span>
      </div>
      <div class="click-upload">
        <p>
Click to upload file
        </p>
          <%= f.file_field :image, multiple: true , id:"item-image"%>
      </div>
    </div>
abridgement
<% end %>

Browsing page

Change before

abridgement
<%= image_tag image %>
abridgement

After change

<% @scene.image.each do |image| %>
  <%= image_tag image %>
<% end %>

With the above changes, it is now possible to post and display multiple photos.

About the future

Since the photos are displayed side by side, the view files are organized at intervals.