Drag and drop file upload

Product Forums Katalon Studio
, ,
1

Hey, is there any way to do drag and drop to a file upload ?
I’ve noticed the drag and drop to object or offset, but that’s not what im looking for.

2

You could try to use executeJavaScript to handle drag-drop upload file. Below is the sample CustomKeyword:

import org.openqa.selenium.WebElement
import org.openqa.selenium.WebDriver
import com.kms.katalon.core.webui.driver.DriverFactory
import org.openqa.selenium.JavascriptExecutor
@Keyword
static void DropFile(TestObject target, String filePath, int offsetX = 0, int offsetY = 0) {
WebElement sourceElement = WebUiBuiltInKeywords.findWebElement(target);
WebDriver driver = DriverFactory.getWebDriver()
JavascriptExecutor executor = ((driver) as JavascriptExecutor)
String JS_DROP_FILE = '''
var target = arguments[0],
offsetX = arguments[1],
offsetY = arguments[2],
document = target.ownerDocument || document,
window = document.defaultView || window;
var input = document.createElement('INPUT');
input.type = 'file';
input.style.display = 'none';
input.onchange = function () {
  target.scrollIntoView(true);
  var rect = target.getBoundingClientRect(),
  x = rect.left + (offsetX || (rect.width >> 1)),
  y = rect.top + (offsetY || (rect.height >> 1)),
  dataTransfer = { files: this.files };
  ['dragenter', 'dragover', 'drop'].forEach(function (name) {
var evt = document.createEvent('MouseEvent');
evt.initMouseEvent(name, !0, !0, window, 0, 0, 0, x, y, !1, !1, !1, !1, 0, null);
evt.dataTransfer = dataTransfer;
target.dispatchEvent(evt);
  });
  setTimeout(function () { document.body.removeChild(input); }, 25);
};
document.body.appendChild(input);
return input;'''
WebElement input =  (WebElement)executor.executeScript(JS_DROP_FILE, sourceElement, offsetX, offsetY);
input.sendKeys(filePath);
//wait.Until(ExpectedConditions.StalenessOf(input));
}
1 Like
3

i have also the problem with drag/drop excel files,
wonder if it is possible in katalon

4

nhi said:

You could try to use executeJavaScript to handle drag-drop upload file. Below is the sample CustomKeyword:

This is not good at work, because now katalon don’t understand the selector, that returned by JS. To solve this i use xpath of “input” element.
If somebody know more good way, pls tell us=)

5

Hello everyone

I’m glad to let you know that Katalon Studio 7.5.1 supports a new WebUI keyword to upload files by drag-and-drop.

Katalon Studio 7.5.1 includes various new features and enhancements. For more information, please refer to the release notes.

Happy Testing

Jass