js drag&dropとinput fileに情報を入れ込む

drag & dropしたら、画像情報がinputに入る仕組みを作成。
調査していると、input fileの中身はいじることができないような記事が出てきたがなんとか実現。

<form>
<input id="upload" type="file" accept="image/*" name="image">
<input type="submit" value="送信">
</form>

$("#upload").on("drop", function(e){
        e.preventDefault();
        document.getElementById("upload").files = e.originalEvent.dataTransfer.files;
    });

dropした時に、イベントが発火する形にします。
id = "upload"を指定して、取得。

filesオブジェクトを取得し、そこへe.originalEvent.dataTransfer.filesを挿入。
すると、inputに画像データが入り、formで送信することができるようになる。

しかし、これだけだとdrag & dropしても動かない時があります。というのも普通dropエリアは広げることを前提に作成するかと思います。drop areaというやつでしょうか。
その際、dropすれば、ブラウザ側が反応して画像をブラウザが開いてしまうことがあります。
そのために、dragoverした際の処理も追加しておきます。

$("upload").on("dragover",function(e){
  e.preventDefault;
  e.stopPropagation;
})

drop-area参照:https://css-tricks.com/drag-and-drop-file-uploading/

以上ですが、dropした際に、画像の名前を表示させたい場合もあると思います。
それと総合して、全文が以下になります。

let form = $("#upload");
let labels = $(".labels")
//html上にlabelsが存在している場合

let showFile = function(files){
  $labels.text(file.length > 1 ? files[files.length-1].name:files[0].name)
}
//画像は1つだけしか許可しないため、複数dropされたら最後の画像の名前を反映

$form.on("dragover",function(e){
  e.preventDefault;
  e.stopPropagation;
});

$form.on("drop",function(e){
  e.preventDefault;
  e.stopPropagation;
  dropfile = e.originalEvent.dataTransfer.files;
  showFiles( dropfile );
  document.getElementById("file").files = dropfile;
})

多分、e.originalEvent.dataTransfer.files;が重要なんだろうけど.....

追記：
e.oroginalEventはイベントのプロパティが入っているらしい。
中身は、eventごとに微妙に違うぽく、clickの時、drop時色々違う。
今回は、dropの時にdataTransferプロパティの中にinputのfile情報が入っているためそこを利用する形だと思われる。
e.targetとかで取れない時にはみてみるといいかも。

参照：https://honey8823.hateblo.jp/entry/2018/08/29/125121
https://html5exam.jp/measures/dojo_1_08.html

drag drop参考：http://www.it-view.net/drag-and-drop-file-upload-jquery-178.html