画像のプレビュー機能とドラッグアンドドロップ

こんなかんじの UI の画像フォームをつくった

ドラッグアンドドロップで画像を認識もする

で画像をいれると

非同期で変化する

開発環境

ruby 2.6.5
Ruby on Rails 5.2.5

前提

jQuery を導入している
bootstrap を導入している
noimage.png というファイルが最初の画像

ドラッグアンドドロップ

以下を参考にした

CDNサーバーつかえるのでサクッと作れる

プレビュー機能

以下を参考にした

コピペ基本的には実装できるんだけど
削除ボタンを押したとき画像が消えちゃうのが気に入らなくてちょっといじった

以下コード

view

      = image_tag @user_introduction.image.url, id: 'preview', class: "picture_size" 
      .input-group 
        .custom-file 
          = f.label :image, class: "custom-file-label", value: "Drug & Drop Here"
          = f.file_field :image, class: "custom-file-input", onchange: 'previewImage(preview)', id: "inputFile"
        .input-group-append 
          button.btn.btn-outline-secondary.input-group-text type="button" id="inputFileReset"
            |取消

js

プレビュー機能

function previewImage(id) {
  const target = this.event.target;     
  const file = target.files[0];      
  const reader = new FileReader();    
  reader.onloadend = function() {      
    preview.src = reaer.result;      
  };
  if (file) {
    reader.readAsDataURL(file);       
  } else {
    preview.src = "";
  }
}

削除機能
document.addEventListener("turbolinks:load", function(){
  document.getElementById('inputFileReset').addEventListener('click', function() {
    var elem = document.getElementById('inputFile');
    elem.value = '';
    elem.dispatchEvent(new Event('change'));
    document.getElementById("preview").src = "/noimage.png"　
  })
})