trigger()を実行できずにいます

Question

前提・実現したいこと

jQuery初心者です。宜しくお願いします。

ファイルのアップロードを作ってます。
inputボタンからアップロードできたので、これをドラッグ＆ドロップでも可能にしようとしてます。

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

ドロップ時に、先に作ったアップロードの処理を呼ぼうと、trigger()を実行したのですが反応しません。

ソースコード

html

           <label class="upload-img__label" >
                <div class="upload-img__label__inner">       
                    <input class="upload-img__input" accept="image/png,image/jpeg" multiple="multiple" type="file" style="display: none;">
                    <svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" >
                        <path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path>
                    </svg>
                    <p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p>
                </div>
            </label>

inputボタンのクリックでアップロードするjs
upload.js

$(document).on('click', '.upload-img__label', function() {
  $('.upload-img__label').off('click');
  
  $('.upload-img__input').off('change');
  $('.upload-img__input').on('change', function (e) {
    
    alert("dropから呼ばれない");

    // ファイル未選択なら処理を抜ける
    c = $('.upload-img__input').val().length;
    if(c==0){
      return;
    }
    
    
    uploadFile(e, this);
   
  })
});

ドラッグ＆ドロップで上記のjsを呼ぶjs
drop.js

$('.upload-img__label').on('dragstart', onDragStart);
$('.upload-img__label').on('dragover', onDragOver);
$('.upload-img__label').on('drop', onDrop);


function onDragStart(e) {
    e.originalEvent.dataTransfer.setData('text', this.id);
}

function onDragOver(e) {
    e.preventDefault();
}

function onDrop(e) {
    e.preventDefault();
    
    alert("start");
    let file = e.originalEvent.dataTransfer.files;
    $('.upload-img__input')[0].files = file;
    $('.upload-img__input').trigger('change', e); //ここで何も起きない
    alert("end");
  
}

inputボタンクリックによるアップロードは出来ております。
choromeの検証にエラーは出てません。
dropのタイミングで.upload-img__inputが認識出来ていないのでしょうか？

先輩方教えていただけないでしょうか？
宜しくお願いします。

Answer 1

upload-img__labelのdrop処理とupload-img__inputのchangeを
紐付ける意味がないのでは？
upload-img__inputをonでchangeを監視しておけば済む話です
アップロードするならsubmitしたりajaxを読んだりすればよいですよね？

Comments

[pecchan]

回答有難う御座います。

upload-img__inputのchangeイベントでアップロードする処理は出来てました。
次にdropでも同イベントを発生させたいので、単純にdropイベントから同イベント（change)を呼ぶ必要があるのかと思ってしまいました。

>changeを監視しておけば済む話です
要領を得ず申し訳ございません。
「jQuery 監視」などでググりましたが、この部分がよく分からずにいます。
これは、どういう意味でしょうか？

[yambejp]

根本的な考え方がダメなのかもしれません

こんなふうにすれば、楽です
<div class="upload-img__label__inner">
<input class="upload-img__input" accept="image/png,image/jpeg" multiple="multiple" type="file">
<svg width="24" height="24" fill="#222222" fill-rule="evenodd" viewBox="0 0 24 24" aria-hidden="true" >
<path d="M19.3,5H16.73l-.8-1.61A.7.7,0,0,0,15.3,3H8.7a.7.7,0,0,0-.63.39L7.27,5H4.7A2.7,2.7,0,0,0,2,7.7V18.3A2.7,2.7,0,0,0,4.7,21H19.3A2.7,2.7,0,0,0,22,18.3V7.7A2.7,2.7,0,0,0,19.3,5ZM12,17.3A4.3,4.3,0,1,1,16.3,13,4.31,4.31,0,0,1,12,17.3Z"></path>
</svg>
<p class="fs12">ドラッグアンドドロップ<br>またはクリックしてファイルをアップロード</p>
</div>

<style>
.upload-img__label__inner{
border:1px solid;
position:relative;
}
.upload-img__input{
position:absolute;
top:0;
width:100%;
height:100%;;
opacity:0;
}
</style>

[pecchan]

やっと意味が理解できました。
外側のlabelがじゃましてイベントが伝播されてなかったわけですね。