How to upload file through an 'input' element with type="hidden" using Selenium and Java?

Question

I want to use Java Selenium to upload the file in the following input element(upload element).

<input type="hidden" ng-model="model[options.key || index]"      
 id="formly_21_fileupload_args_content_substrate_surface_media_documentURL_0"
 name="formly_21_fileupload_args_content_substrate_surface_media_documentURL_0"
 formly-custom-validation="options.validators"
 class="ng-pristine ng-untouched ng-invalid ng-invalid-wizard-validation">

I have tried to use 'sendKeys' but got the error informatoion:

upload.sendKeys("filePath"); // element is invisible

then I tried to use JavascriptExecutor in the script to change the visibility of the Element (type="file"), but still got the same error: element is invisible:

JavascriptExecutor jsexec = (JavascriptExecutor) driver; 
jsexec.executeScript("arguments[0].type='file'", upload);

I also tried to use the parent element 'div' to do the upload, but got the error "cannot focus the element".

is there anyone can help me to solve this problem?

Can you please paste the code for using the JavascriptExecutor to change the visibility of the object? — Timothy T., Aug 24 '18 at 08:47
Try the solution listed here as well: https://stackoverflow.com/questions/17638826/make-html-hidden-input-visible — Timothy T., Aug 24 '18 at 08:49
I modified the question description and add the code for using the JavascriptExecutor, I will try the solution — Jialei Cheng, Aug 24 '18 at 08:57

undetected Selenium · Answer 1 · 2018-08-24T10:00:18.410

0

As per your question and the HTML you have shared the <input> tag is having the attribute type="hidden". To invoke sendKeys() on the <input> tag you can use the following solution:

WebElement uploadElement = new WebDriverWait(driver, 10).until(ExpectedConditions.visibilityOfElementLocated(By.xpath("//input[@class='ng-pristine ng-untouched ng-invalid ng-invalid-wizard-validation'][contains(@name,'_fileupload_args_content_substrate_surface_media_documentURL_')]")));
String jse = "arguments[0].type='file'";
((JavascriptExecutor)driver).executeScript(jse, uploadElement);
uploadElement.sendKeys("absolute_path_of_the_file_to_be_uploaded");

edited Aug 24 '18 at 10:00

answered Aug 24 '18 at 09:25

undetected Selenium

183,867
41
278
352

I have tried this, but it dosen't really work. In the test I can see the upload input is invisible and the file name shows behind the element, but it dosen't really upload the file – Jialei Cheng Aug 24 '18 at 09:53
@JialeiCheng Tryout my updated answer and let me know the status. – undetected Selenium Aug 24 '18 at 10:00
@JialeiCheng Can I get a feedback on my updated answer? – undetected Selenium Aug 24 '18 at 13:13
sorry for the delay, I tried this, but it still has the same problem – Jialei Cheng Aug 27 '18 at 07:26

score 0 · Answer 2 · answered Aug 25 '18 at 09:23

What I'm guessing your issue to essentially be, is that there is probably a wrapper object to beautiful the default input element. It is common for web developers to 'hide' this default input element and as such, Selenium will fail to click on this object because its display attribute is set to 'none'.

We may need to look at the other HTML tags within that DOM hierarchy, but I suspect there is probably another input tag nested 1 or 2 levels below, that looks something like this. It should at least have a display attribute set to none:

<input display: none;> </input>

To upload a file, you will need to sendKeys directly to this element instead. But first, you will need to make it visible:

//the 'upload' variable here refers to the input element with display: none;

JavascriptExecutor jsexec = (JavascriptExecutor) driver; 
//First, change the display to inline to expose the underlying input element
jsexec.executeScript("arguments[0].display='inline;', upload);

After the above code is executed you should see a raw input element appearing. This is the element you would want to sendKeys to:

//After that you can go ahead to upload the file:
upload.sendKeys("path of the file");

In all honesty, without seeing the entire DOM, I am not able to advise whether the below line is necessary. You will need to try and see for yourself:

jsexec.executeScript("arguments[0].type='file'", upload);

If no such nested input element exists, just try the code above with the current input element you found.

How to upload file through an 'input' element with type="hidden" using Selenium and Java?

2 Answers2