input type="file" id="select-image-base" class="file-upload html5-upload-input" accept="image/*" -- How to upload a file to this element in console?

Question

When I inspect a website, it shows <input type="file" id="select-image-base" class="file-upload html5-upload-input" accept="image/*">

I want to upload an image file to this element found on their website, using a javascript function in Edge.

If I type this into the console in Edge:

document.querySelector('.file-upload').click()

Edge simulates a click to the element.

I can also simulate scrolling with a javascript console line of code.

But how can I send a file to a file-upload element?

I basically want to do the same thing to this element, but instead of a click, I want to send an image file to this drag-and-drop file upload box, using a line of javascript text in the console.

Answer 1

No, you can't. The only way to set the value of a file input is by the user selecting a file.

This is done for security reasons. Otherwise you would be able to create a JavaScript that automatically uploads a specific file from the client's computer. You can only choose a file to upload manually.

Answer 2

no, you can't. the way you must do is to push your media through an API

Answer 3

navigate to: https://www.htmlquick.com/reference/tags/input-file.html

If you use this code

function getElementByXpath(path) {
  return document.evaluate(path, document, null, XPathResult.FIRST_ORDERED_NODE_TYPE, null).singleNodeValue;
}

var o= getElementByXpath("//section[@id='examples']//input[@name='uploadedfile']")

o.value='z:\test.png'

then you will get:

VM4266:7 Uncaught DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
    at <anonymous>:7:8

This is normal when you do it from the website .

But if you try it with geckodriver.exe then it should be possible.