【Rails 備忘録】 画像設定ボタンを画像に置き換える方法

画像設定ボタンが無骨だったので、画像に置き換える方法を調べたので共有します。

方法

jsファイルで画像のIDを読み取り、クリックされると画像設定ボタンがクリックされたことにします。

jsファイル

function imageclick(){
  // 画像のid取得
  const setImage = document.getElementById('imagePreview')
  // 画像にクリックイベントをつける
  setImage.addEventListener('click', function() {
    // 画像がクリックされたらボタンのidを取得　クリックイベントを発火させる
    document.getElementById('fileInput').click();
  })
}
// Event lisnersに登録
document.addEventListener("turbo:load", imageclick);

HTMLファイル

= form_with model: @recipe, local: true do |f|
 /#カメラの画像
 = image_tag 'camera.jpg', id: 'imagePreview'
 /# 画像設定ボタン
 = f.file_field :thumbnail, id: 'fileInput', style: 'display: none;'

結果

カメラの画像をクリックしたら画像選択メニューが表示されるようになりました。