Tutorials

Tutorials

Left Click and Upload: Driving a File Picker

A short workflow that navigates to a page with a file upload widget, builds a GPALFile from a list of local paths, and uses LeftClickAndUpload to drive the native file picker dialog before clicking the upload button. Good first stop for any workflow that needs to attach files through a browser.

Complete Program

Here's the whole workflow, start to finish. Each piece is broken down and explained below.

using GenerallyPositive;

using GenerallyPositive.Browser;

using static GenerallyPositive.Enums;

GPAL

.WithPublishToConsole()

.WithUseOttoMagic(@"C:magic")

.WithDriverLocation(@"c:drivers");

IBrowser browser = GPAL.Browser

.WithBrowserType(BrowserType.Chrome)

.WithUseAutomationEngine(AutomationEngine.OttoMagic)

.WithUseStealth(StealthType.PatchChromeDriver | StealthType.DarkMode | StealthType.CDP)

.WithLoadImages(true)

.ToGPALObject();

browser

.GoTo("https://example.com/file-upload")

.WithSelector("#fileupload > div > div.col-lg-7 > span.btn.btn-success.fileinput-button > input[type=file]")

.WaitFor(5_000);

GPALFile uploadFiles = GPAL.File

.WithFileName(@"C: empphoto1.jpg")

.WithFileName(@"C: empphoto2.jpg")

.ToGPALObject();

browser

.LeftClickAndUpload(uploadFiles)

.LeftClick("#fileupload > div > div.col-lg-7 > button.btn.btn-primary.start > span")

.WaitFor(10_000);

browser.Close(true);

Configure GPAL and Launch the Browser

WithUseOttoMagic points GPAL at a local OttoMagic install, WithDriverLocation tells it where to find browser drivers. The browser itself is launched with stealth options on (patched chromedriver, dark mode, CDP leak handling) and images enabled, since the upload widget needs to render correctly.

GPAL

.WithPublishToConsole()

.WithUseOttoMagic(@"C:magic")

.WithDriverLocation(@"c:drivers");

IBrowser browser = GPAL.Browser

.WithBrowserType(BrowserType.Chrome)

.WithUseAutomationEngine(AutomationEngine.OttoMagic)

.WithUseStealth(StealthType.PatchChromeDriver | StealthType.DarkMode | StealthType.CDP)

.WithLoadImages(true)

.ToGPALObject();

TIP

The real test program loops over every AutomationEngine value, skipping the ones that don't support file upload yet. For a single workflow, just pick the engine you want - the rest of the chain doesn't change. See Automation Engines.

Navigate and Target the File Input

GoTo loads the page, WithSelector points at the hidden file input element the page uses for its upload button, and WaitFor gives the page up to 5 seconds to finish rendering before GPAL tries to interact with it.

browser

.GoTo("https://example.com/file-upload")

.WithSelector("#fileupload > div > div.col-lg-7 > span.btn.btn-success.fileinput-button > input[type=file]")

.WaitFor(5_000);

Build a GPALFile and Upload It

GPAL.File.WithFileName lets you stack up multiple file paths into one GPALFile object. LeftClickAndUpload clicks the targeted file input, which opens the OS-native file picker dialog, then drives that dialog to select the files described by the GPALFile - all in one call.

GPALFile uploadFiles = GPAL.File

.WithFileName(@"C: empphoto1.jpg")

.WithFileName(@"C: empphoto2.jpg")

.ToGPALObject();

browser

.LeftClickAndUpload(uploadFiles)

.LeftClick("#fileupload > div > div.col-lg-7 > button.btn.btn-primary.start > span")

.WaitFor(10_000);

browser.Close(true);

WARNING

The native file picker is a Windows dialog, not part of the page DOM. LeftClickAndUpload drives it through hardware-level interaction, which means the browser window needs focus and shouldn't be covered by other windows while this runs. See Hardware-Level Interaction.

On this page

Tutorials
Left Click and Upload: Driving a File Picker
  • Complete Program
  • Configure GPAL and Launch the Browser
  • Navigate and Target the File Input
  • Build a GPALFile and Upload It