プレビュー表示された画像から削除する(Rails/ActiveStorage)

https://qiita.com/AttAtD/items/6b9502c0fa75531ee400
https://qiita.com/AttAtD/items/c2077d3bd3d0f1be3268
の続き

追加した画像を削除することができないので、その対応を行う。

投稿フォームに画像の削除ボタンを追加する。

削除ボタンにはJavascriptから呼び出すためにdata-action="image-preview#removeImage"を付与する。
また、その際に削除対象のファイルを特定できるようにdata-file属性にファイル名を付与しておく

• new.html.erb

  ...
  <% @post.photos.each do |photo|%>
    <li data-image-preview-target="preview" data-file="<%= photo.blob.filename %>">
      <%= f.hidden_field :signed_ids, multiple: true, value: photo.blob.signed_id %>
      <div>
        <%= image_tag photo, style: "width:300px" %>
      </div>
      <div>
        <button type="button" 
          data-file="<%= photo.blob.filename %>"
          data-action="image-preview#removeImage">
          削除
        </button>
      </div>
    </li>
   <% end %>
  ...

削除するJavascriptを追加

• image_preview_controller.js

static targets = [ "output", "input", "preview"];

...

removeImage(e) {
    let input = this.inputTarget;
    const previews = this.previewTargets;
    const button = e.currentTarget;
    const fileName = button.getAttribute("data-file");
    const preview = previews.find((target) => target.getAttribute("data-file") == fileName);
    if(preview) {
      preview.remove();
    }
    const files = Array.from(data.files);
    const index = files.findIndex((f) => f.name == fileName);
    if (index != -1) {
      data.items.remove(index);
      input.files = data.files;
    }
  }

ファイル追加時のjavascriptの実装を修正

ファイル追加時に生成されるタグにもdata-file属性、data-action属性などを追加して、削除ボタンが表示されるようにする

• image_preview_controller.js

  readOne(f, index, output) {
    let reader = new FileReader();
    reader.readAsDataURL(f);
    reader.onload = () => {
      const html= `<li data-image-preview-target="preview" data-file="${f.name}"> # ここを修正
                  <div>
                    <image src="${reader.result}" style="width:300px"/>
                  </div>
                  <div> 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 # ここを追加
                    <button type="button" data-file="${f.name}" data-action="image-preview#removeImage" }> # ここを追加
                      削除 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　# ここを追加
                    </button>　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　  　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　# ここを追加
                  </div>　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　       　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　　　　 　　　　　　　　# ここを追加
                </li>`;
      output.insertAdjacentHTML('beforeend', html);
    };
  }