◆ 標準 input 自体が対応しているので余計なことはせずにわかりやすく見た目を少し変えるだけ
◆ input 以外にドロップしたときに何も起きないようにする

ファイルの入力で ダイアログだけじゃなくドラッグアンドドロップを対応させたいことはときどきあります
昔 ページの画面全体でファイルのドロップに対応したものを作ったりもしましたが 準備が面倒です
もっと簡単に扱いたいです

それに全画面は便利ではありますが 画面内の複数箇所にファイル選択 input がある場合も考えるとファイル選択を行う箇所へのドロップ対応だけで十分です

そういう部分的なドロップ対応のものも以前作りました
標準の input[type="file"] 自体がドラッグアンドドロップに対応しています
なので ドロップエリアの見た目は自分で作って その上に透明な input[type="file"] を重ねておきます
そうすればクリックすればダイアログが開いて その上にドロップすればそのファイルを選択できます

ただ これも面倒な点がありました
自分でここにドロップできますよ感のある見た目を作って ドロップされたファイルの名前や中身を表示してファイルが選択されたことをわかるようにしないといけないです

色々と考えた結果 標準の input だけで十分に思えてきました
機能的な不足でもなければ独自の見た目を作るよりも使い慣れたコントロールがベストです
ただ 標準の input はドラッグアンドドロップできる感が足りません
普段使っていても知らない人は結構いるようです
Chrome の場合はドロップ可能なエリアもわかりづらく ファイル名のところも一応可能ですが背景と同じ色なのでどこまでが範囲なのかがわかりづらいです
なので単純に ドラッグアンドドロップできる感を出すだけの対応をします

あと 部分的なドラッグアンドドロップ対応の場合に 範囲外にドロップしてしまうとブラウザ標準の機能でローカルファイルのページへ遷移していまいます(最近はタブで開いてた気がしますけど)
なので その無効化も行います

とりあえずこんな感じになりました

<!doctype html>
<meta charset="utf-8"/>

<div>
<h1>aaaaa</h1>
<input type="file" title="ここにファイルをドロップできます">
<p>aaaaa</p>
</div>

<script>
const isTarget = t => t.localName === "input" && t.type === "file"
window.addEventListener("drop", eve => {
if (isTarget(eve.target)) {
eve.target.classList.remove("dragover")
} else {
alert("ドロップが許可されていないエリアです")
eve.preventDefault()
}
})
window.addEventListener("dragover", eve => {
if (!isTarget(eve.target)) {
eve.preventDefault()
}
})
window.addEventListener("dragenter", eve => {
if (isTarget(eve.target)) {
eve.target.classList.add("dragover")
}
})
window.addEventListener("dragleave", eve => {
if (isTarget(eve.target)) {
eve.target.classList.remove("dragover")
}
})
</script>

<style>
.dragover {
outline: 7px dashed red;
outline-offset: 3px;
filter: brightness(120%);
}
</style>

title 属性でマウスを乗せるとドロップできるというツールチップを表示します
ドラッグすると dragover クラスが追加されるので そのクラスでアウトラインをつけるなどの調整を行います

シンプルですがこれで十分なんですよね
script タグだけコピペして .dragover にスタイルを用意するだけで使い回せます