# Drag and Drop File or UploadFile doesn't work for multiple files

**URL:** <https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360>\
**Category:** Web Testing\
**Tags:** katalon-studio\
**Created:** [September 16, 2021, 4:21pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360 "2021-09-16T16:21:36Z")\
**Posts on this page:** 11\
**Page:** 1

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [September 16, 2021, 4:21pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/1 "2021-09-16T16:21:36Z")

</div>

We’ve spent about 2-3 days now trying to figure this out.  
I want the test to upload multiple files at the same time either by draganddrop from filepath or by fileUpload method.

I’ve tried several methods and none of them seem to work for bulk upload. Uploading the files individually works fine, but doing it bulk breaks it.

These are the two codeblock that we are certain SHOULD work but doesn’t.

codeblock 1 - in this case, we tried both the upload button, or the drag&drop area.

```
def list = ['QA_pdf.pdf', 'QA_docx.docx', 'QA_pp.pptx']

def dir = new File("C:\\Users\\ashra\\Desktop\\All Files\\")
	dir.eachFile (FileType.FILES) { file ->
	list << file
}

for (item in list) {
WebUI.uploadFile(findTestObject('Page_File Storage/*button_Or Click to Select*'), item, 
	FailureHandling.STOP_ON_FAILURE)
}

```

method #2-

```
def list = ['QA_pdf.pdf', 'QA_docx.docx', 'QA_pp.pptx']

def dir = new File("C:\\Users\\ashra\\Desktop\\All Files\\")
	dir.eachFile (FileType.FILES) { file ->
	list << file
}

for (item in list) {
WebUI.uploadFileWithDragAndDrop(('Page_File Storage Integrations/div_Drag and Drop area'), item, 
	FailureHandling.STOP_ON_FAILURE)
}

```

both of these methods returns error. method 2 seems to return files not found but it’s vaguely similar.

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/0/1/01b93fb41eaf463d688c4fc304c66df89580784d.png)

---

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [September 16, 2021, 4:23pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/2 "2021-09-16T16:23:10Z")

</div>

also tried a simpler method… by defining the filepaths

```
def allFilePath = (filePath + '\n' + filePath2 + '\n' + filePath3 + '\n' + filePath4)

WebUI.uploadFileWithDragAndDrop(('Page_File Storage Integrations/div_Drag and Drop area'), 
	allFilePath, 
		FailureHandling.STOP_ON_FAILURE)
```

---

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [September 20, 2021, 5:36pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/3 "2021-09-20T17:36:18Z")

</div>

@ThanhTo any solution to this?  
I need to upload multiple files from desktop (bulk upload) to the drag&drop area but it isn’t working with several methods i’ve tried above.

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/c/4/c4461cc62677de5756d21bafcb4dd6e7b0f91137.png)

---

<div class="post-metadata">

**Author:** ![Brandon\_Hein](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/brandon_hein/32/1092_2.png) [@Brandon\_Hein](https://forum.katalon.com/u/Brandon_Hein)\
**Post date:** [September 20, 2021, 5:59pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/4 "2021-09-20T17:59:25Z")

</div>

@ashraf.madina Have you searched the forums for solutions to this? There are several topics which solve this problem already. Give this one a try:

> [@How to Resolve File Upload Issues](http://forum.katalon.com/t/how-to-resolve-file-upload-issues/29812):
>
> I’ve been seeing several topics around issues with uploading files to a web application when using the WebUI.uploadFile() method, so I thought I’d share the best alternative approach (note: this is the same approach that one would take in Selenium as well): Step 1: Identify the file upload field Lets take a typical file upload field: [image] What we want is the \<input\> element for the field, which will look something like this (with probably a bunch of other attributes): \<input type="file" …

Specifically, check my “Bonus Step” section.

---

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [September 20, 2021, 11:43pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/5 "2021-09-20T23:43:34Z")

</div>

that likely only works if there’s an input upload element on the page, it didn’t work

---

<div class="post-metadata">

**Author:** ![Brandon\_Hein](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/brandon_hein/32/1092_2.png) [@Brandon\_Hein](https://forum.katalon.com/u/Brandon_Hein)\
**Post date:** [September 21, 2021, 3:06pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/6 "2021-09-21T15:06:10Z")

</div>

> [@ashraf.madina](#):
>
> that likely only works if there’s an input upload element on the page

Well, is there an `<input>`? I’ve never seen a file upload field that wasn’t.

Please share the HTML for your field if possible.

---

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [September 23, 2021, 7:41pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/7 "2021-09-23T19:41:16Z")

</div>

the picture of the drag and drop area and button is posted above.

There is an input in the html but it’s layered - this is cuz of React styling library.

 ![image](https://europe1.discourse-cdn.com/katalon/original/3X/e/f/ef259ffb3d4a247be804a20d9aeadb6d1b566519.png)

---

<div class="post-metadata">

**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\
**Post date:** [September 23, 2021, 8:45pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/8 "2021-09-23T20:45:36Z")

</div>

`<input type=file...>`

THAT is an input.

---

<div class="post-metadata">

**Author:** ![ashraf.madina](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/ashraf.madina/32/20464_2.png) [@ashraf.madina](https://forum.katalon.com/u/ashraf.madina)\
**Post date:** [September 23, 2021, 9:01pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/9 "2021-09-23T21:01:45Z")

</div>

it’s nested, layered - it’s React libraries. that’s how styling libraries work for React front-end. That means it’s literally hidden in the UI and for automation

---

<div class="post-metadata">

**Author:** ![Russ\_Thomas](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/russ_thomas/32/11884_2.png) [@Russ\_Thomas](https://forum.katalon.com/u/Russ_Thomas)\
**Post date:** [September 23, 2021, 9:31pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/10 "2021-09-23T21:31:53Z")

</div>

Doesn’t matter if it’s hidden. Doesn’t matter what framework it is. THAT IS YOUR INPUT.

Sorry to shout but you seem to need convincing. Ditch whatever baggage you have regarding frameworks and see the page as what it is: HTML, CSS and JavaScript. Everything else is just window-dressing.

---

<div class="post-metadata">

**Author:** ![Brandon\_Hein](https://dub1.discourse-cdn.com/katalon/user_avatar/forum.katalon.com/brandon_hein/32/1092_2.png) [@Brandon\_Hein](https://forum.katalon.com/u/Brandon_Hein)\
**Post date:** [September 23, 2021, 10:41pm UTC](https://forum.katalon.com/t/drag-and-drop-file-or-uploadfile-doesnt-work-for-multiple-files/58360/11 "2021-09-23T22:41:42Z")

</div>

As Russ said, all that matters here is the HTML. Your web page could literally just be an image of a potato, and have all sorts of actual architecture underneath.

So, I’ll refer you back to my topic now that hopefully that makes sense:

> [@How to Resolve File Upload Issues](http://forum.katalon.com/t/how-to-resolve-file-upload-issues/29812):
>
> I’ve been seeing several topics around issues with uploading files to a web application when using the WebUI.uploadFile() method, so I thought I’d share the best alternative approach (note: this is the same approach that one would take in Selenium as well): Step 1: Identify the file upload field Lets take a typical file upload field: [image] What we want is the \<input\> element for the field, which will look something like this (with probably a bunch of other attributes): \<input type="file" …