ファイルAPIを使った画像ファイルの取得とプレビューについてメモ

概要

railsアプリケーション上で画像ファイルをドラッグ＆ドロップする際、ドロップする先をファイルの投稿フォームではなく別のオブジェクトにドロップし取得。
取得した画像ファイルをフォームへ渡してプレビューを表示した。

環境

Rails5.1
jquery3.3.1
mysql

データの取得

※inputボタンを大きくしてそこにドロップするならこの部分は飛ばしてOK
（参考記事はどっか行きました…）

image_upload.js

// ドロップされる側のオブジェクトのidを'drop'とする

 var target = document.getElementById('drop');
  if (target) {

// ドラッグオーバー時の処理。
    target.addEventListener('dragover', function (e) {
      e.preventDefault();
      e.stopPropagation();
      e.dataTransfer.dropEffect = 'copy';
    });

  // ドロップ時の処理。データをフォームに渡す。
    target.addEventListener('drop', function (e) {
      e.stopPropagation();
      e.preventDefault();
      document.getElementById('ファイルをもたせるフォームのid').files = e.dataTransfer.files;
    });
  }

• addEventListener

addEventListener() は関数または EventListener を実装したオブジェクトを、呼び出される EventTarget における指定されたイベント種別のイベントリスナーのリストに加えることで動作します。

この辺がよくわかってないところなのですが、どうやら指定したリスナーをEventTarget上に登録して、それを呼び出している、、、

らしい。

今回の場合はdragoverとdragをtergetに登録して、イベント時に中の記述を呼び出しているってことでいいのかなと思います(自己解決)。

• dataTransferでドラッグされているデータの保持

• getElementByIdは該当するidが見つからない場合if文に処理を入れてあげないと、他のページでエラーが出て死にます。

• e.preventDefault();とe.stopPropagation();は画像がやってきたときのブラウザの動作を止めてるので、消すと画像ファイルをブラウザが全力で表示しちゃいます。

ちなみに下記の部分で画像をフォームに渡してあげてます。

document.getElementById('ファイルをもたせるフォームのid').files = e.dataTransfer.files;

プレビュー

さて、画像をフォームに渡せたらその内容をプレビューします。

image_upload.js

// 先程ファイルをもたせたフォームのクラス:form_class
// プレビュー画像の追加先クラス:upload_list

  $('.form_class').on('change',function(e) {
    for(var i = 0; i < this.files.length; i++){
      const reader = new FileReader();
      reader.onload = function (e) {
        var html = `<img alt='画像' src='${e.target.result}'>`
    ('.upload_list').append(html);
      }
      reader.readAsDataURL(this.files[i]);
    }
  });

• for文に入れているのは複数画像をもたせた時に複数を一度にプレビュー処理をします。
  （この場合、前提としてformにmultipleとか設定してないといけないのですがそれはまた別のお話）

• onloadでファイルの読み込み完了時に発火

• readAsDataURLでFileを読み込みresultにdata：URLを返しています。

まとめ

あんなにヤキモキしたのにたったこれだけ。

何かお気づきの点やらご指摘等ありましたら、ご教授いただけますと幸いです。
初学者なのでお手柔らかにお願いいたしますです…

参考

File - MDN - Mozilla　
（ここ読めばたいていそれぞれの説明はちゃんと書いてありますが実際どう使うか悩みます）

その他参考にした記事

http://honey8823.hateblo.jp/entry/2018/08/29/125121
http://koheik.hatenablog.com/entry/2016/07/08/152936
https://qiita.com/kon_yu/items/f98df7ac826e7c36cc6c