CODEWITHSUNDEEP
javascripthtmljqueryfirefoxtampermonkey
Daniel Kaplan
Daniel Kaplan

Reputation: 67430

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.

Upvotes: 2

Views: 1513

Answers (1)

Prasanth
Prasanth

Reputation: 5258

It is possible to modify a file input type with Tampermonkey.

If you are not able to add drag and drop support to the input itself straight away, you can implement drag and drop using another dom element and use them as below.

const dT = new ClipboardEvent('').clipboardData || // Firefox < 62 workaround exploiting https://bugzilla.mozilla.org/show_bug.cgi?id=1422655
new DataTransfer(); // specs compliant (as of March 2018 only Chrome)

dT.items.add(new File([dataURItoBlob(image)], '1.jpg', { type: 'image/jpeg' }));
dT.items.add(new File([dataURItoBlob(image2)], '2.jpg', { type: 'image/jpeg' }));

// then ...
// $("iframe").contents().find(".file-input").get(0).files = dT.files;

That snippet of code was tested working, in a similar setting where a file input was being attached to the page dynamically after clicking a button. The images were drag n dropped onto the page using a different div.

Upvotes: 1

Related Questions