html

<form action="" method="post">
  <!--デバッグ用インラインスタイル-->
  <div id="drop-zone" style="border: 1px solid;">
    <p>ファイルをドラッグ＆ドロップもしくは</p>
    <input type="file" name="file" id="file-input">
  </div>
</form>

JavaScript

const dropZone = document.querySelector("#drop-zone");
const preview = document.querySelector("#preview");
const fileInput = document.querySelector("#file-input");

/* dragover = ドラッグ中にマウスポインターが要素上に存在する状態 */
dropZone.addEventListener("dragover", function (event) {
  event.preventDefault();
  this.style.background = "#e1e7f0"; //dragover時のdropZone背景色を設定
});

/* dragover = ドラッグ中にマウスポインターが要素上から離れた瞬間 */
dropZone.addEventListener("dragleave", function (event) {
  event.preventDefault();
  this.style.background = "#ffffff"; //dragleave時のdropZone背景色を設定
});

/* drop = ドラッグ中の要素をドロップした瞬間 */
dropZone.addEventListener("drop", function (event) {
  event.preventDefault();
  this.style.background = "#ffffff"; //drop時のdropZone背景色を設定
  const files = event.dataTransfer.files; //dataTransfer = ドラッグ操作で取得したデータが格納されているオブジェクト
  fileInput.files = files; //inputのvalueをドラッグイベントで取得したファイルに書き換え
});