【JavaScript】ドラッグ&ドロップでの画像アップロード機能(非同期処理)

<div class="right_form drag_form" id="dragAndDropArea">
　<p>ドラッグアンドドロップしてください</p>
</div>

// ドラッグ&ドロップのステータス dragenter, dragover中はtrueになる
let drag_over_status = false;

// ドラッグ要素にファイル画が入ってきたとき
$('#dragAndDropArea').on('dragenter', function(e) {
  e.stopPropagation();
  e.preventDefault();
  // dragenterのタイミングでドラッグ&ドロップ要素の枠線を目立たせる処理
  if(drag_over_status = true) $(this).addClass('dragover');
    //ドラッグ&ドロップのステータスをtrueにする
    drag_over_status = true;
});

// ドラッグ中
$('#dragAndDropArea').on('dragover', function(e) {
  e.stopPropagation();
  e.preventDefault();
  if(drag_over_status = true) return true;
    //ドラッグ&ドロップのステータスをtrueにする
    drag_over_status = true;
});

// ドラッグ要素から離れた時
$('#dragAndDropArea').on('dragleave', function(e) {
  e.stopPropagation();
  e.preventDefault();
  drag_over_status = false;
  // dragleaveのタイミングでドラッグ&ドロップ要素の枠線を通常に戻す
  $(this).removeClass('dragover');
});

// ドラッグされた時
$('#dragAndDropArea').on('drop', function(event) {
  event.stopPropagation();
  event.preventDefault();
  drag_over_status = false;
  // dropされたファイルを取得してアップロードする処理を実行
  create_upload_data(event);
});

// フォームデータの作成
function create_upload_data(event) {
  $('#dragAndDropArea').removeClass('dragover');
  drag_over_status = false;
  // FormDataオブジェクトの作成
  const formData = new FormData();
  // Files APIでdropされたファイルを取得
  const files = event.originalEvent.dataTransfer.files;
  // ファイルの数に応じてループ処理でFormDataにappendする
　　for(let i = 0; i < files.length; i++) {
　　　　formData.append('file', files[i]);
　　}
   // アップロードする処理にFormDataを渡す
　　upload_file_by_drop(formData);
}

// アップロード処理
function upload_file_by_drop(formData) {
// データを送信
fetch(コントローラーのURL(Path), {
  method: 'POST',
  body: formData,
})
// 成功したらレスポンステキストを取得
.then((response) => response.text())
// レスポンスを取得
.then((text) => {
　　alert(text);
// エラー処理(例外処理)
.catch((error) => alert('画像のアップロードに失敗しました。'));
}