How do I find and trigger an event while ignoring image prompt?

Question

I have created a chrome extension that gets my desired data-images into a external website file input (fileList) field.

How do I trigger the event of the fileList when the only listener I can see is 'Invalid' in Chrome Development tool?

This is the button I'm working with:

  `<input type="file" multiple="" accept="image/gif,image/jpg,image/jpeg,image/pjpeg,image/png,image/x-png" aria-label="Add photos or drag and drop" data-testid="media-upload" name="images" class="thisClassChangesAllTheTime" autocomplete="off" id="inputfile">`

Unfortunately if I try something like: $('#inputfile').click(); It will just bring up the prompt to find a new image and then my fileList images are lost once I hit add. I want to bypass the find image prompt and use the image in the fileList.

I have also tried $('#inputfile').change(); to no prevail, which I assume is because it's not a function. I've also tried the Javascript alternatives to jQuery (I know jQuery is old)

How would I find what event or handler to trigger and then how would I trigger that via code?

I'm happy with a Javascript or jQuery answer/guidance.

The site I'm trying to use this on, uses react, so I'm not sure if that effects the answer to the solution in what we target with js?

Any guidance/help to solve my mind numbing issue, would be warmly welcomed. 😊