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.
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.
no, you can't. the way you must do is to push your media through an API
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.