Uncaught TypeError: Failed to execute 〜〜〜parameter 1 is not of type 'Blob'.

Question

前提・実現したいこと

ここに質問の内容を詳しく書いてください。
画像の編集機能を実装していてcanvas上にユーザーが選択した画像を表示させたいです。

発生している問題・エラーメッセージ

Uncaught TypeError: Failed to execute 'readAsDataURL' on 'FileReader': parameter 1 is not of type 'Blob'.

該当のソースコード

var file = document.querySelector('.sell-upload-drop-file');
var canvas = document.getElementById('c1');
var canvasWidth = 400;
var canvasHeight = 300;
var uploadImgSrc;

// Canvasの準備
canvas.width = canvasWidth;
canvas.height = canvasHeight;
var ctx = canvas.getContext('2d');

function loadLocalImage(e) {
  // ファイル情報を取得
  var fileData = e.target.files[0];
  // FileReaderオブジェクトを使ってファイル読み込み
  var reader = new FileReader();
  // ファイル読み込みに成功したときの処理
  reader.onload = function() {
      // Canvas上に表示する
      uploadImgSrc = reader.result;
      canvasDraw();
  }
  // ファイル読み込みを実行
  reader.readAsDataURL(fileData);
}

// ファイルが指定された時にloadLocalImage()を実行
file.addEventListener('change', loadLocalImage, false);

// Canvas上に画像を表示する
function canvasDraw(imgSrc) {
  // canvas内の要素をクリアする
  ctx.clearRect(0, 0, canvasWidth, canvasHeight);

  // Canvas上に画像を表示
  var img = new Image();
  img.src = uploadImgSrc;
  img.onload = function() {
      ctx.drawImage(img, 0, 0, canvasWidth, this.height * (canvasWidth / this.width));

    // Canvas上にテキストを表示
    addText();

    // canvasを画像に変換
    var data = canvas.toDataURL();

    // 画像として出力
    var outputImg = document.createElement('img');
    outputImg.src = data;
    document.getElementById('result').appendChild(outputImg);
    }
  }

<div class='sell-dropbox-container clearfix'>
　<div class='have-item-0 sell-upload-items'>
　　<ul>
　　</ul>
　</div>
<label for="item_images"><div class='clearfix have-item-0 sell-upload-dropbox'>
<input class="sell-upload-drop-file" multiple="multiple" style="display: none;" type="file" name="item[images][]" id="item_images" />
<pre>
　ドラッグアンドドロップ
　またはクリックしてファイルをアップロード
</pre>
</div>
<ul class='has-error-text'>
</ul>
</label>
<section class='modalArea' id='modalArea'>
　<div class='modalBg' id='modalBg'></div>
　　<div class='modalWrapper'>
　　　<div class='modalContents'>
　　　<div class='modal-bold'>
　　　　写真を切りとる
　　　</div>
<a class="disabled" tabindex="-1" href="/"><input class="sell-upload-drop-file" multiple="multiple" style="display: none;" type="file" name="item[images][]" id="item_images" />
　<span>
　  写真を変更する
　</span>
</a>
<i class='fas fa-camera'></i>
</div>
<div class='sell-crop-editor'>
<canvas id='c1' style='cursor: grab;'></canvas>
</div>
<div class='clearfix'>
　<li class='cansel-button' id='closeModal'>
　<a href="/items/new?method=post">
　　キャンセル
　</a>
</li>
<li class='ok-button'>
　<a href="">
　　完了
　</a>

不明点

reader.readAsDataURL(fileData);の部分が悪いんだとは思うのですがエラー内容が読み解けず撃沈しています。
どなたかこのエラーについてご教授いただきたいです。

補足情報（FW/ツールのバージョンなど）

Ruby on Rails 5.2.1

Comments

[m.ts10806]

fileDataをconsole.log()で確認するとどうなってますか？Blob型でないと適用できないので、型が違う情報なのではないかと思います。
http://e-words.jp/w/BLOB.html

[takagitoshinari]

console.log(fileData);で調べたところ"undefind"でした。これは型が原因なのでしょうか？

[m.ts10806]

どこで書いたか分からないですが、そもそもデータ取得できてないようですね。
再現確認のためにHTMLもご提示ください。

[takagitoshinari]

HTMLを記載させていただきました！

[yambejp]

HTMLが見当たりませんが？

[m.ts10806]

編集できていないようです。

[takagitoshinari]

すみませんでした！編集完了しました

[m.ts10806]

これはHTMLというより何かのフレームワークのVIEWファイルですよね。
ブラウザから「ソースを表示」を行った情報を提示されたほうがより多くの人が再現確認できます。

[m.ts10806]

それか、そのフレームワークの情報、バージョンなどの環境情報をご提示ください。

[takagitoshinari]

すみません勘違いしていました。
現在、Sublimetextを使っています
version 3.1.1、build3176です

[m.ts10806]

それはテキストエディタであって言語ではないですよね。「HTML」で提示された内容は何のプログラミング言語でしょうか。

[takagitoshinari]

Ruby on Rails です。
ご迷惑おかけして申し訳ありません！

[takagitoshinari]

Rails 5.2.1です

[m.ts10806]

タグおよび環境情報として質問本文に追記願います。単純にhtmlでない場合、再現確認を行うには環境が手元にないといけません。
単純にhtmlなどクライアントだけの対応にしたいのであればブラウザから実行して「ソースを表示」した際のhtmlソースをご提示ください

[takagitoshinari]

ご迷惑をおかけして申し訳ありません
ソースを表示するからHTMLを持ってきました！

[m.ts10806]

コード提示部分がマークダウンミスってるので修正してもらえたらと。
私の方は特に迷惑と思ってないので淡々と回答に必要な情報を提示してもらえたらそれで良いです

[takagitoshinari]

ありがとうございます！
マークダウン記法で書かせていただきました！

[takagitoshinari]

編集できてなかったのでやり直します

[takagitoshinari]

これであってますでしょうか？

[m.ts10806]

プレビューが表示されてるはずなので落ち着いてそちらを確認して調整してください

[m.ts10806]

あと、タグの追加、環境情報(言語、フレームワーク)の追記ですね

[takagitoshinari]

タグ追加、環境情報は完了しました！
HTMLはおかしいでしょうか？

[m.ts10806]

結果を見てみれば明らかですね。→HTMLのマークダウン
<a href="">
完了
</a>
```
↑ここにバッククォート3つ追加するだけで良いはずですが。

タグに必要なのはHTMLよりもRuby、Railsですね。

[m.ts10806]

ただ、HTMLも結構半端な提示のされ方をしているような。
</div>や</label>はあるけど開始タグがなかったり。
開始タグはあっても閉じタグがなかったり。

[takagitoshinari]

すいません！修正します！

[m.ts10806]

JavaScriptのコードにもSyntaxエラー出てますね・・・。

[takagitoshinari]

修正しました。いかがでしょうか？

Answer 1

canvasDrawに引数をあたえてないですが大丈夫ですか？

ここまでは動きますよね？

<script>
window.addEventListener('DOMContentLoaded', function(e){
  document.querySelector('#f1').addEventListener('change',function(e){
    var fileData=e.target.files[0];
    var reader = new FileReader();
    reader.onload = function() {
      uploadImgSrc = reader.result;
      console.log(uploadImgSrc);
    }
    reader.readAsDataURL(fileData);
  });
});
</script>
<input type="file" id="f1">

Answer 2

var fileData = e.target.files[0];
を
var fileData = this.files[0];
に変更するとどうでしょうか？

Comments

[takagitoshinari]

試してみましたが同じエラー文が表示されました(T . T)

[runny_nose]

試してみたのですが、提示されているコードで特にそのようなエラーはおきませんでした。

↓CodePenにそのまま転記してみたのですが、質問者さんの環境で動作しますか？
https://codepen.io/anon/pen/REyjVp?editors=1111

[takagitoshinari]

https://i.gyazo.com/baad109ff470c3ce92fef5344e6a337d.mp4
上記はGIFなのですが現在練習でメルカリもどきを作っています。実装したい箇所は編集を押すとモーダルが出てきてモーダルのcanvas上にユーザーが選択した画像が出るといった仕様にしたいです。
ファイルを選択するというボタンを選ばないのでCodePenに書いていただいたコードであれば動作します。
長文になってしまい申し訳ありません！