ファイル選択にてキャンセルした場合、キャンセル回数分画像が追加されてしまう

Rails5.2のjqueryです。
ダイアログで選択した画像をアップロードする処理を追加しました。

ダイアログにてキャンセルした場合、キャンセルした回数分、画像が追加されてしまいます。

例えば、２回「キャンセル」をクリックして３回目で「開く」をクリックした場合、以下のようになります。

最初、turbolinksが原因かなと思いoffにしても同じでした。

キャンセル（ファイル未選択）時は、処理が走らないように思い、if (file == null)ならreturnとしましたが上手くいきませんでした。

分かる方教えて下さい。
宜しくお願い致します。

javascript
1/* global $*/
2$(document).on('turbolinks:load', function(){
3  
4  $(document).on('click', '.image_upload', function(){
5
6    
7    //$liに追加するためのプレビュー画面のHTML。横長でないとバグる
8    let preview = $('<div class="image-preview__wapper"><img class="preview"></div><div class="image-preview_btn"><div class="image-preview_btn_edit">編集</div><div class="image-preview_btn_delete">削除</div></div>'); 
9    //次の画像を読み込むためのinput。 
10    let append_input = $(`<li class="input"><label class="upload-label"><div class="upload-label__text">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード<div class="input-area"><input class="hidden image_upload" type="file" multiple="multiple"></div></div></label></li>`)
11    let $ul = $('#previews')
12    let $li = $(this).parents('li');
13    let $label = $(this).parents('.upload-label');
14    let $inputs = $ul.find('.image_upload');
15    
16    //inputに画像を読み込んだら、"プレビューの追加"と"新しいli追加"処理が動く
17    $('.image_upload').on('change', function (e) {
18      
19      //inputで選択した画像を読み込む
20      let reader = new FileReader();
21      
22      //これは駄目
23      // let file = reader.readAsDataURL(e.target.files[0]);
24      // if (file == null)
25      // {
26      //   console.log("未選択につき処理を抜ける")
27      //   return;
28      // }
29
30      // プレビューに追加させるために、inputから画像ファイルを読み込む。
31      reader.readAsDataURL(e.target.files[0]);
32      
33      //画像ファイルが読み込んだら、処理が実行される。 
34      reader.onload = function(e){
35        //previewをappendで追加する前に、プレビューできるようにinputで選択した画像を<img>に'src'で付与させる
36        // つまり、<img>タグに画像を追加させる
37        $(preview).find('.preview').attr('src', e.target.result);
38      }
39
40      //inputの画像を付与した,previewを$liに追加。
41      $li.append(preview);
42      
43      //プレビュー完了後は、inputを非表示にさせる。これによりプレビューだけが残る。
44      $label.css('display','none'); // inputを非表示
45      $li.removeClass('input');     // inputのクラスはjQueryで数を数える時に邪魔なので除去
46      $li.addClass('image-preview'); // inputのクラスからプレビュー用のクラスに変更した
47      let $lis = $ul.find('.image-preview'); // クラス変更が完了したところで、プレビューの数を数える。 
48      
49      $('#previews li').css({
50        'width': '114px'
51      })
52      
53    
54
55      
56      
57
58
59
60    })
61    
62  })
63  
64});
65

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

回答1件

ベストアンサー

ソース詳細の確認はできていませんが、イベントリスナの多重登録が起こっています.

過去のご質問にも回答していますが、ページを表示後にパフォーマンスを低下させる悪い例になっています。

javascript
1$(document).on('click', '.image_upload', function(){
2
3  // click されるたびに、 'change' イベントが追加される。
4  // 結果、change イベント発火時に、リスナが繰り返し実行される
5  $('.image_upload').on('change', function (e) {
6    // 繰り返し実行される処理
7  });
8
9});