0

I am working on a tool that automatically submits files to a website using Selenium and ChromeDriver.

Usually uploading files is easy with Selenium since you can just give the information to the <input type="file"> element. However, in this case I am working with a website that has a custom file upload button, there is no <input type="file"> anywhere on the page and the upload happens instantly after selecting a file in the file upload dialog (like this):

Browser upload dialog

Therefore, my only option is to have Selenium click on the custom upload button and control the file dialog. But I can't figure out how to do this. How do I use Selenium to control the OS/browser file upload dialog?

I have seen this SO question which doesn't seem to apply to me because they have <input type="file"> on the page and are trying to trigger the upload dialog, but I do not have that element and I do not have a problem triggering the dialog, my problem is with controlling the dialog once it's open. I have also read several questions on SO about uploading multiple files and none have information that can help my situation.

Aaron Franke
  • 3,268
  • 4
  • 31
  • 51
  • https://stackoverflow.com/questions/38829153/selenium-drag-and-drop-from-file-system-to-webdriver – Shivang Gupta Jan 29 '22 at 20:42
  • What binding language are you using with Selenium? I mean what coding language are you using? – Prophet Jan 29 '22 at 20:47
  • @Prophet I'm using C# – Aaron Franke Jan 29 '22 at 21:03
  • @ScriptDeveloper This website doesn't have a drag-and-drop area for files. It is a button (` – Aaron Franke Jan 29 '22 at 21:07
  • You could try using AutoIt along with C# to try to upload files. – Arundeep Chohan Jan 29 '22 at 21:52
  • I need clarification before I give a try. After you selecting the file, do you see any attribute value is changing in DOM? because I believe the value should be stored somewhere. – Nandan A Jan 30 '22 at 12:22
  • @NandanA No, nothing changes in the DOM. When a file is selected, it's instantly uploaded, the contents are displayed on the site, and the file path doesn't exist anywhere in the DOM. This is for Connecticut's government website for annual withholding tax forms so unfortunately it's not something most people could give a try. I apologize if it seems like an impossible challenge but I was really hoping there was a way to just grab control of the file dialog itself. – Aaron Franke Feb 02 '22 at 18:56

1 Answers1

0

I found this solution, I hope this work for you too:
You can set the value of your input field using JavaScript. Considering that the id of the field is fileName the following example will set the value of the input to the file C:\temp\file.txt:

String script = "document.getElementById('fileName').value='" + "C:\\\\temp\\\\file.txt" + "';";
((IJavaScriptExecutor)driver).ExecuteScript(script);

In this example, driver is your WebDriver instance.

Please note that you have to use four backslashes (\) for Windows-like paths because you are required to pass double back-slashes to the JavaScript so you have to escape both with two additional slashes. The other option is to use a forward slash (e.g. "C:/tmp/file.txt") and that should also work.
Credits to the author

Prophet
  • 32,350
  • 22
  • 54
  • 79
  • As explained in the question, this does not work for me because there is no input element that accepts files. The upload button on the website is entirely custom, it's a button that calls some JavaScript to open a file dialog and uploads the file instantly once selected. There is no element for me to call `document.getElementById` on. – Aaron Franke Jan 29 '22 at 21:50
  • OK, I see. If you want I can remove this answer. Or I can leave it since it may be possibly helpful to other users – Prophet Jan 29 '22 at 21:56