How to upload file on a hidden input - WebdriverIO

[@AdityaKumar-of3lf]

Man I was trying to find solution to this problem from ages. Thanks a lot. It really helped

[@sdetunicorns]

Awesome! I'm so glad this video helped you out. If you need more help or have any other questions, feel free to reach out. Keep up the good work and happy testing!

[@mlpadmasrip]

Thank you , it worked.

[@tester4044]

Thank you, bro! Its work!!! Im happy!

[@sumaiyasiddiqa4765]

Awesome thanks alot 👍🏻

[@nikunjpatel3092]

Once again you helped me a lot Dilpreet, I am migrating our webtest from v4 to v7 and all tests are running on web browser client and nw.js (desktop app). We have exactly the same scenario of uploading the file in one of the tests wherein the input field is hidden, I spent around 5 hours to fix this but after watching your previous and this video fixed my issue in one try... once again thanks a lot for this video .

[@sdetunicorns]

Awesome, that's really great to hear!

[@gvbaba4231]

@@sdetunicorns hey message me, i have a project for u to automate.

[@erdemore8629]

I have spent 2 days ; )

[@erdemore8629]

great explanation, in my case it was not the style but class attribute was the issue. I had to replace d-none class attribute d-none with d-block. document.querySelector('input[type="file"]').classList.replace('d-none', 'd-block') At the end of the day, thank you for pointing out this.

[@sdetunicorns]

Yes, the implementation is different for each site. But, it's good that you were able to figure it out!

[@Tapana32]

but how it implement ck editor upload function There is no submit button.

[@SWARAJPILLAIMUSIC]

Hey Man, there is no Submit button in our page, what to do in such a situation ?

[@sdetunicorns]

You will need to find what triggers the submit event and then call it accordingly.

[@bhavyagowda8116]

Application thar I am working doesn't have hidden file type , in this scinario how to upload file

[@sadabsaqib9483]

Thank you, application that i am working doesn't have hidden file type, have used AutoIT . It works on local but doesn't work in bamboo pipeline, if you get time would you mind making one video to handle file upload using autoIT and pass relative path from test script.

[@saragungun]

AutoIT didn't work for me in AWS as well, because my container is having Linux. Locally i tested on windows.

[@shubhangisabale3980]

How to upload file on button,if there is no input tag

[@saragungun]

I'm not able to alter the DOM. How do I upload files?

[@prasanthik6862]

Did you get the solution?

[@hrishikeshmishra-tl7le]

For me input.setValue(FilePath) worked fine.

[@sdetunicorns]

Yes, however, it's still good to know how to manipulate DOM if in case it doesn't work in future.

[@prasanthik6862]

Hi @Dilpreet, your video is awesome but in my case, the element has no parent and is placed directly inside tag which is "" and I have placed below function in my code snippet; browser.execute(() => { document.getElementsByClassName('dz-hidden-input').style.visibility = 'visible' }).....as it has visibility property instead of display. these are properties of my input element, visibility: hidden; position: absolute; top: 0px; left: 0px; height: 0px; width: 0px; This is the error i'm getting in console "javascript error: Cannot set properties of undefined (setting 'display') (Session info: chrome=109.0.5414.87)"

[@sdetunicorns]

Hello, you should test this out on the browser console first by removing the class and style attribute and then doing an upload manually. If that works then you can apply the same in the execute command

[@ravitejamygapula]

@prasanthik6862 Can you post the working code for your question. Even in my scenario also its looks like your only but am fail to get exact solution for that