【Rails】選択画像のプレビューを動的に表示させる

画像のプレビュー機能をシンプルに書きたいと思い、JavaScriptのFileReaderで実装しました。メモとして残します。

やりたいこと

1. input tyupe="file"のファイルを選択ボタンをクリックして画像ファイルを選択する。
2. プレビュー枠の画像が選択した画像に置きかわる。

実装環境

• Ruby on Rails
• Slim
• Carrier wave
• JavaScript

実装コード

必要なコードのみ抜粋します。

/ form_withのコードの一部
label
  = form.file_field :image, class: 'd-none', onchange: "previewImage(this, 'previewImageField')"
      span.btn.btn-secondary ファイルを選択
    = form.hidden_field :image_cache
    / プレビュー枠
    - if hoge.image.present?
      = image_tag hoge.image.thumb.url, id: 'previewImageField', class: 'img-thumbnail'
    - else
      = image_tag 'no_image.png', id: 'previewImageField', class: 'img-thumbnail'

javascript:
  const previewImage = (input, id) => {
    const file = input.files[0];
    const reader = new FileReader();
    const image = document.getElementById(id);
    reader.readAsDataURL(file);
    reader.onload = () => {
      image.src = reader.result;
    };
  };

解説

1. fileに選択したファイルのバスを格納する。
2. readerにFileReaderインスタンスを格納する。
3. iamgeにimage_tagを格納する。
4. readAsDataURL(file)でreaderにfileを渡す。
5. readerのonloadイベントで、imageのsrcをfileのバスに置きかえる。

参照

FileReader