htmlのinput fileタグに、別の箇所にドラッグアンドドロップしたファイルをセットしたいです。

Question

前提・実現したいこと

免罪符にならないですが、html、javascript初心者です。

<form action="" method="post">
    <input type="file" name="file1" id="file1">
    <input type="file" name="file2" id="file2">
    <input type="file" name="file3" id="file3">
    <input type="file" name="file4" id="file4">
    <input type="file" name="file5" id="file5">
    <input type="submit" value="アップロード">
</form>
<div class="dragarea">ここにドラッグしてください</div>

上記のようなフォームと、ドラッグアンドドロップをするための場所を用意し、.dragareaにドロップされたファイルをinput fileのidの数値が一番若いタグにセットをしたい(複数同時にドロップした場合は1つずつ若い順にセットしたい)のですが、実装の方法がわからず困っております。
multipleにしていない理由は、一度セットしたファイルを確認し、2番目の物だけキャンセルしたい、等の時に個別でリセットボタンを配置したい為です。
javascriptのこういった機能を使えば出来る等のヒントなど教えて頂けると助かります。
宜しくおねがいします。

補足情報（FW/ツールのバージョンなど）

HTML5 Laravel Framework 8

Answer 1

先日別件でお答えしたこちらでいけませんか？
考え方は、ドロップしたファイルをblobに保持しておいて、submit時にonformdataで処理する

Answer 2

.dragarea の drop イベントの dataTransfer.files を目的の<input type=file> の files プロパティに代入すればよいです。