FileReaderのonerrorが動作しない

JavaScriptで、FileReaderを使って<input type="file">で選択した画像ファイルを読み込む処理を作り、
例外処理としてFileReader.onerrorを実装しました。

JavaScript
1function test(event) {
2    var file = event.target.files[0];
3    const reader = new FileReader();
4    const imgReader = new Image();
5
6    reader.onloadend = function() {
7        imgReader.onload = function() {
8
9            // 処理
10
11        }
12        imgReader.src = reader.result;
13    }
14    reader.readAsDataURL(file);
15
16    // 読み込みが失敗した場合はそのまま送信
17    reader.onerror = function(){
18        // 処理
19    };
20}

reader.onerrorのテストをしたいと思い、var fileのところでデバッグをはり、
ファイルを選択後、選択したファイルのファイル名を変更して実行しました。

DOMExceptionは発生しているようなのですが、
reader.onerrorの中の処理に入りません。

原因を教えてほしいです。

試したこと

書く位置が違うのかと思い、
reader.readAsDataURL(file);の直前に書いたり、
reader.onloadend = function() {の前後に書いたりしましたが、
reader.onerror = function(){は動作しませんでした。

reader.onerror = function(){
をif (reader.error)に書き換えたところ、括弧の中の処理に入りました。

こちらの質問に記載のイベント発生の方法を試しても
reader.onerror = function(){の中の処理に入りませんでした。
FileReaderのonerrorをテストしたい

以下のサイトで、ファイルを選択後ファイル名を変更するという方法は
上手くいっているので書き方が間違っているとかでもなさそうです。
FileReader.onerror - 読み込みに失敗した時に発火するイベント

ブラウザはEdgeを使用しています。

yambejp

2023/06/08 09:35

FileReader.onerrorとは具体的にどうやってエラーを発生させてそれをどう受け取りたいのですか？普通に読む限りエラーは起きませんよね？

djfjamf

2023/06/08 09:44

はい、普通に読む限りエラーは起きないのですが、念のため例外処理を入れています。 reader.onerror = function(){}の中の処理のテストがしたいので、エラーを発生させたいです。

Lhankor_Mhy

2023/06/12 05:35 編集

試してみましたが、普通にエラー処理が走りました。（win10 Firefox, Chorme）デバッガーはここで停止させています。 function test(event) { debugger; var file = event.target.files[0];

行動規範の内容に同意します

回答1件

カスタムイベントでerrorイベントを発生させればonerrorに処理は流れますね

javascript
1<script>
2
3function test() {
4  const e_err = new CustomEvent("HTMLEvents");
5  e_err.initEvent("error", true, true );
6  var file = event.dataTransfer.files[0];
7  const reader = new FileReader();
8  reader.onload = function(e) {
9    console.log(e.target.result);
10    reader.dispatchEvent(e_err)
11  }
12  reader.readAsDataURL(file);
13  reader.onerror = function(){
14    console.log('err');
15  }
16}
17</script>
18<input type="file" ondrop="test()">