[RUBY] Veröffentlichen / Löschen mehrerer Bilder mit Active Storage

Umgebung

Ruby 2.5.1 Rails 5.2.4.3

Was willst du tun

Ich möchte eine Funktion implementieren, mit der Sie mehrere Bilder mithilfe der Standarddateiverwaltungsfunktion Active Storage von Rails veröffentlichen / löschen können.

Erstellen Sie zuerst eine App

$ rails new sample_app
$ cd sample_app 
$ bin/rails db:create

An einem anderen Terminal

$ bin/rails s

Wenn Sie auf http: // localhost: 3000 zugreifen und ein bekanntes Bild sehen, ist dies in Ordnung.

Modell und Controller erstellen

Diesmal mit dem Namensbeitrag.

$ bin/rails g model post name:string 
$ bin/rails db:migrate
$ bin/rails g controller posts

Routing

config/routes.rb

Rails.application.routes.draw do
  resources :posts
end

Installieren Sie Active Storage

$ bin/rails active_storage:install
Copied migration 20200726095142_create_active_storage_tables.active_storage.rb from active_storage

Es wird eine Migrationsdatei erstellt, die die folgenden zwei Tabellen erstellt. ・ Active_storage_attachments ・ Active_storage_blobs Migrieren Sie, um eine Tabelle zu erstellen.

$ bin/rails db:migrate
== 20200726095142 CreateActiveStorageTables: migrating ========================
-- create_table(:active_storage_blobs)
   -> 0.0020s
-- create_table(:active_storage_attachments)
   -> 0.0019s
== 20200726095142 CreateActiveStorageTables: migrated (0.0041s) ===============

Stellen Sie es in Verbindung mit dem Modell zur Verfügung

models/posts.rb

class Post < ApplicationRecord
  has_many_attached :images
end

Beschreiben Sie den Controller

controllers/posts_controller.rb

class PostsController < ApplicationController
  def index
    @posts = Post.all
  end

  def new
    @post = Post.new
  end

  def create
    @post = Post.new(post_params)

    if @post.save
      flash[:success] = "erstellt"
      redirect_to posts_path
    else
      render :new
    end
  end

  def destroy
    @post = Post.find(params[:id])
    @post.destroy
    flash[:success] = "erstellt"
    redirect_to posts_path
  end

  private

  def post_params
    params.require(:post).permit(:name, images: [])
  end
end

Ansicht erstellen

Post Listenseite

erb:posts/index.html.erb

<h1>Beitragsliste</h1>
<%= link_to 'Neuer Beitrag', new_post_path %>
<%= render @posts %>

Erstellen Sie dieses Mal einen Teilbeitrag und zeigen Sie ihn an.

erb:posts/_post.html.erb

<div class="post-partial">
  <li id="post-<%= post.id %>">
    <%= post.name %>
    <% post.images.each do |image| %>
      <%= image_tag(image, width:100) %>
    <% end %>
    <%= link_to 'Löschen', post, method: :delete, data: { confirm: 'Löschenしてよろしいですか?' } %>
  </li>
</div>

Neue Seite

Multiple: true ist erforderlich, wenn mehrere Bilder veröffentlicht werden

erb:posts/new.html.erb

<%= form_with(model: @post, local: true) do |f| %>
  <div>
    <%= f.label :name, 'Name' %>
    <%= f.text_field :title %>
  </div>

  <div>
    <%= f.label :images, 'Bild' %>
    <%= f.file_field :images, multiple: true %>
  </div>

  <div>
    <%= f.submit  'Post' %>
  </div>
<% end %>

Greifen Sie über Ihren Browser auf http: // localhost: 3000 / posts zu

Ich konnte mehrere Bilder aus einem neuen Beitrag veröffentlichen.

Löschen Sie ein Bild

Methode zum Controller hinzufügen

Fügen Sie die zum Bearbeiten erforderlichen Bearbeitungs- und Aktualisierungsmethoden hinzu.

controllers/posts_controllers.rb

  def edit
    @post = Post.find(params[:id])
  end

  def update
    post = Post.find(params[:id])
    if params[:post][:image_ids]
      params[:post][:image_ids].each do |image_id|
        image = post.images.find(image_id)
        image.purge
      end
    end
    if post.update_attributes(post_params)
      flash[:success] = "Bearbeitet"
      redirect_to posts_url
    else
      render :edit
    end
  end

Erstellen einer Post-Editierseite

Es ist fast dasselbe wie die neue Post-Seite, aber der Teil, um das registrierte Bild anzuzeigen und zu überprüfen, wird hinzugefügt.

erb:posts/edit.html.erb

<%= form_with(model: @post, local: true) do |f| %>
  <div>
    <%= f.label :name, 'Name' %>
    <%= f.text_field :name %>
  </div>

  <div>
    <%= f.label :images, 'Bild' %>
    <%= f.file_field :images, multiple: true %>
  </div>

  <% if @post.images.present? %>
    <p>Derzeit registrierte Bilder (überprüfen Sie, was Sie löschen möchten)</p>
    <% @post.images.each do |image| %>
      <%= f.check_box :image_ids, {multiple: true}, image.id, false %>
      <%= image_tag image, size:"100x100" %> <br>
    <% end %>
  <% end %>

  <div>
    <%= f.submit  'Bearbeiten' %>
  </div>
<% end %>

Bearbeitungslink zum Index hinzugefügt

erb:posts/index.html.erb

<div class="post-partial">
  <li id="post-<%= post.id %>">
    <%= post.name %>
    <% post.images.each do |image| %>
      <%= image_tag(image, width:100) %>
    <% end %>
    <%= link_to 'Bearbeiten', edit_post_path(post.id) %> 　#hinzufügen
    <%= link_to 'Löschen', post, method: :delete, data: { confirm: 'Löschenしてよろしいですか?' } %>
  </li>
</div>

Bestätigung

Klicken Sie im Browser auf den Bearbeitungslink und überprüfen Sie nur die Bilder, die Sie löschen möchten.

Ich konnte nur ein Bild löschen.

Referenz

Versuchen Sie, mehrere Bilder mit Active Storage zu verwalten So löschen Sie mehrere Bilder mit ActiveStorage