Storing file chooser data in a hidden input

I am using a tool called TamperMonkey to modify a webpage for my personal convenience. TamperMonkey lets you modify the client-side HTML etc. by appending JavaScript to the page after it loads.

The webpage has a file chooser, but it doesn't let you drag-and-drop a file. I use this webpage a lot so having drag-and-drop functionality would really help.

This page has a form with a file input type. I've been reading, and there's no way to modify a file input type for security reasons. But, using TamperMonkey, I could change the input type of the file chooser to "hidden," then set the hidden input value to the file contents that I drop on the webpage, right? It's my understanding that the server couldn't tell the difference (if the name attribute is the same).

I don't know how to set the hidden input type to the same data the file chooser would have:

I've got my file here: const file = e.originalEvent.dataTransfer.files[0];

I've got my hidden input type by doing this: const hiddenField = $("iframe").contents().find(".file-input").attr('type','hidden')

I just don't know how to take file and set it on hiddenField. Should this value be base64 encoded? A blob? Regardless, what code would set the data correctly?

The form it's wrapped in looks like this:

<form ... method="post" enctype="multipart/form-data">

Important context for alternative suggestions: this file chooser input isn't on the page at all until you click a button. Then it shows up in an iframe.

I am using firefox.

from Storing file chooser data in a hidden input