[Feature] Drag and Drop for uploading folders

[Vanish404]

I wondering, is it possible to simulate drag and drop from file manger? For example Finder. I just want to drag and drop multiple folders and files and upload them directly to the S3. The problem is that File class has path field that read only. So if I drop a folder I will get

{
  name: "a.txt", // file name
  path: "/folder/a.txt",
  size: 2473, // 2kb
  type: "text/plain",
  lastModifiedDate: ...,
...

Do you have some workaround to set this path field?

[dgozman]

@Vanish404 I am not sure I understand the exact question. Do you have a page that accepts dropped files/folders and you'd like to test that?

Perhaps you'd like some kind of API for external drag&drop? Here is a proposal (does not exist today):

await page.drop('/path/to/folder');

[Vanish404]

@Vanish404 I am not sure I understand the exact question. Do you have a page that accepts dropped files/folders and you'd like to test that?

@dgozman I built an example, so you can play around https://codesandbox.io/s/dreamy-frost-3eziz. I also add console.log() when folder will be dropped. I dropped test-folder with files and get a result:

Perhaps you'd like some kind of API for external drag&drop? Here is a proposal (does not exist today):

await page.drop('/path/to/folder');

I suppose yes, because page.dragAndDrop method works only with css selectors on the same page as I understood. In my case, I just want to drag and drop some folders from file manager (like finder) using playwright. My test-case looks like that:

1. I open window,
2. find the file input
3. open Finder if it possible or simulate it
4. drag and drop some folder from finder to the file input area. note: (!) => onDrop callback returns array of File class and I can read path field by using JS. When I create request to the S3 I use path field to build path to the S3.
5. click upload btn
6. wait and check that folder was successfully uploaded.

[dgozman]

@Vanish404 This makes sense. Let me change the title to a feature request, because we don't have such API right now.

[Vanish404]

Hey @dgozman, any updates? or mb some workaround?

[dgozman]

@Vanish404 No updates on this one, sorry.

[pavelfeldman]

Why was this issue closed?

Thank you for your involvement. This issue was closed due to limited engagement (upvotes/activity), lack of recent activity, and insufficient actionability. To maintain a manageable database, we prioritize issues based on these factors.

If you disagree with this closure, please open a new issue and reference this one. More support or clarity on its necessity may prompt a review. Your understanding and cooperation are appreciated.