[WebUI] Upload File by Drag-and-Drop

Description

Upload files to a website by drag-and-drop.

Keyword name: uploadFileWithDragAndDrop

Note:

Your Katalon Studio version must be 7.5.0+.

Precondition: For the keyword to work, the drop zone must be visible before it is used.

Parameters

Parameter	Parameter Type	Required	Description
to	TestObject	Optional	An object representing the drop zone. If unspecified, the drop zone is the website's body element by default.
filePath	String	Yes	The absolute path to the file to be uploaded.
flowControl	FailureHandling	Optional	Specify failure handling schema to determine whether the execution should be allowed to continue or stop.

Example

Given there is a file named yourImage.jpg in our project folder that needs uploading on https://imgur.com/upload?beta, the snippet below uses WebUI.uploadFileWithDragAndDrop to perform the operation. Since the website supports drag and drop on the entire webpage, we don’t have to specify a drop zone:

import com.kms.katalon.core.configuration.RunConfiguration as RunConfiguration
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject

WebUI.openBrowser('')
WebUI.navigateToUrl('https://imgur.com/upload?beta')
def filePath = RunConfiguration.getProjectDir() + '/yourImage.jpg'
WebUI.uploadFileWithDragAndDrop(filePath)
WebUI.delay(5)
WebUI.closeBrowser()

If uploading multiple files at once by drag-and-drop, for the value of the parameter named filePath, please provide a string with the following format:

pathToFile 1 + "\n" + pathToFile2 + "\n" + pathToFile3

For example:

import com.kms.katalon.core.configuration.RunConfiguration as RunConfiguration
import com.kms.katalon.core.webui.keyword.WebUiBuiltInKeywords as WebUI
import static com.kms.katalon.core.testobject.ObjectRepository.findTestObject
WebUI.openBrowser('')
WebUI.navigateToUrl('https://imgur.com/upload?beta')
def filePath = RunConfiguration.getProjectDir() + '/Katalon-Devices.JPG'
def filePath1 = RunConfiguration.getProjectDir() + '/Katalon-Devices 1.JPG'
def filePath2 = RunConfiguration.getProjectDir() + '/Katalon-Devices 2.JPG'
def concatenatedFilePath = (((filePath + '\n') + filePath1) + '\n') + filePath2
WebUI.uploadFileWithDragAndDrop(concatenatedFilePath)
WebUI.verifyElementPresent(findTestObject('Object Repository/Imgur/Page_Imgur The magic of the Internet/span_3 images saved'),
    10)
WebUI.delay(5)
WebUI.closeBrowser()

A sample project is available here.

Variations of the keyword usage

Some websites support uploading a file by drag-and-drop it anywhere on the page, while others only support that in a limited area. Hence, you can omit or keep the TestObject to parameter in corresponding use cases.

Known limitation

Some website (e.g., Mobile Photo Upload) only shows the drop zone when users drag and drop a file, which means the drop zone is not visible before this keyword is used. In this case, the keyword will not work.