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 %>

写真.png

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.

Recommended Posts

Save and display multiple images
[AWS ECR] Save and get Docker images
CarrierWave Upload multiple images
Calculate and display grades
Format and display numbers
[Android] Display images and characters on the ViewPager tab
[Rails API + Vue] Upload and display images using Active Storage
[Rails] Save images using carrierwave
Implementation policy to dynamically save and display Timezone in Rails
Android app to select and display images from the gallery
Linking multiple TextFields and PickerView
[Java] Upload images and base64
Upload multiple images to Cloudinary on Active Storage and publish to Heroku
[Rails] Save start time and end time
To display multiple lines with UILabel
I want to display images with REST Controller of Java and Spring!