[RUBY] Publier / supprimer plusieurs images avec Active Storage

environnement

Ruby 2.5.1 Rails 5.2.4.3

Que veux-tu faire

Je souhaite implémenter une fonction qui vous permet de publier / supprimer plusieurs images à l'aide de la fonction de gestion de fichiers standard Rails Active Storage.

Créez d'abord une application

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

Dans un autre terminal

$ bin/rails s

Si vous accédez à http: // localhost: 3000 et voyez une image familière, c'est OK.

Créer un modèle et un contrôleur

Cette fois avec le nom post.

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

routage

config/routes.rb

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

Installer le stockage actif

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

Un fichier de migration est créé qui crée les deux tables suivantes. ・ Active_storage_attachments ・ Active_storage_blobs Migrez pour créer une table.

$ 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) ===============

Rendre disponible en association avec le modèle

models/posts.rb

class Post < ApplicationRecord
  has_many_attached :images
end

Décrivez le contrôleur

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] = "créé"
      redirect_to posts_path
    else
      render :new
    end
  end

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

  private

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

Créer une vue

Page de la liste des messages

erb:posts/index.html.erb

<h1>Liste des messages</h1>
<%= link_to 'Nouveau poste', new_post_path %>
<%= render @posts %>

Cette fois, créez un article partiel et affichez-le.

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 'Effacer', post, method: :delete, data: { confirm: 'Effacerしてよろしいですか?' } %>
  </li>
</div>

Nouvelle page

Multiple: true est requis lors de la publication de plusieurs images

erb:posts/new.html.erb

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

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

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

Accédez à http: // localhost: 3000 / posts depuis votre navigateur

J'ai pu publier plusieurs images à partir d'un nouveau message.

Supprimer n'importe quelle image

Ajouter une méthode au contrôleur

Ajoutez les méthodes d'édition et de mise à jour requises pour l'édition.

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] = "Édité"
      redirect_to posts_url
    else
      render :edit
    end
  end

Créer une page de modification de publication

C'est presque le même que la nouvelle page de publication, mais la partie pour afficher l'image enregistrée et la vérifier est ajoutée.

erb:posts/edit.html.erb

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

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

  <% if @post.images.present? %>
    <p>Images actuellement enregistrées (cochez ce que vous souhaitez supprimer)</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  'Éditer' %>
  </div>
<% end %>

Ajout d'un lien d'édition à l'index

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 'Éditer', edit_post_path(post.id) %> 　#ajouter à
    <%= link_to 'Effacer', post, method: :delete, data: { confirm: 'Effacerしてよろしいですか?' } %>
  </li>
</div>

Vérification

Cliquez sur le lien de modification dans le navigateur et cochez uniquement les images que vous souhaitez supprimer.

Je n'ai pu supprimer que n'importe quelle image.

référence

Essayez de gérer plusieurs images à l'aide du stockage actif Comment supprimer plusieurs images avec ActiveStorage