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

enter image description here

enter image description here

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

enter image description here

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?

enter image description here

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

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

enter image description here

enter image description here

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

enter image description here

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?

enter image description here

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