How to handle hidden File Upload input with Katalon

I am able to resolve this issue with a simple way after struggling for hours. I hope this will save you time.

I had been facing an issue to test upload my file on my application. I have used Katalon’s Uploadfile method for this but it failed initially. because i was not able to detect the file upload input box, as it was hidden. I knew my element is hidden i can see it, but was failing to handle through Katalon Methods. I was not able to detect it with Katalon object spy web.

I started looking for ways to handle hidden file upload input box. I had used javascript code given in so many posts online, just to make that element visible, so i can use it to upload file but just sending the file path. I had tried other ways indeed.

Below is the screenshot to showcase my example:

Finally, I got success on this, by following below steps:

  1. I manually updated the Element code which was making it hidden. In My case it was “class=“hide”” by inspecting the File upload element.
    Note: You may need to look for similar element for for Input type file. And try removing the attribute which is making that hidden

  2. Now, My Element is visible on the page. Like This:

  3. I started Spy web of Katalon, went to that page

  4. Captured the element with Alt+` key (if does not work, try with a click)

  5. Now this time, i just tried it directly by sending file path to this element (found at step 4). I did not try to make it visible this time.

And it actually worked !!

I am able to upload the file with this way.

I hope this might have helped someone. As i have seen multiple posts online to make hidden file upload visible.

3 Likes

Good Tip!

(Moved to Tips and Tricks)