[Feature] Drag and drop zip file

[LiutskoOlga]

Hello, could you help me please with drug and drop zip file?

const buffer = fs.promises.readFile('FILE_PATH')
    const dataTransfer = await this.page.evaluateHandle((data) => {
      const dt = new DataTransfer()
      const file = new File([data.toString()], 'equity.box.gz', { type: 'application/gzip' })
      dt.items.add(file)
      return dt
    }, buffer)
    await this.page.dispatchEvent('LOCATOR', 'drop', { dataTransfer })
```

but when run it in browser, I got and error

```
Uncaught (in promise) Error: invalid gzip data
    at gzs (browser.js:937:9)
    at gunzipSync (browser.js:1266:32)
    at gunZip (compress.ts:22:10)
    at BoxImportStrategy.maybeUnzip (ImportStrategy.ts:122:14)
    at async BoxImportStrategy.preProcess (ImportStrategy.ts:131:22)
    at async importFileUX (importFileUx.tsx:74:22)
```



Thank you for your help!

[pavelfeldman]

Let's consider translating Buffer into the ArrayBuffer as a value-type.

[LiutskoOlga]

Resolved with next code

const buffer = fs.readFileSync('PATH-TO-FILE').toString('base64')

    const dataTransfer = await this.page.evaluateHandle(async (data) => {
      const dt = new DataTransfer()

      const blobData = await fetch(data).then(res => res.blob())

      const file = new File([blobData], 'equity.box.gz', { type: 'application/gzip' })
      dt.items.add(file)
      return dt
    }, 'data:application/octet-stream;base64,' + buffer)

    await this.page.dispatchEvent('LOCATOR', 'drop', { dataTransfer })
  }

[Jeromearsene]

From example of @LiutskoOlga, I've make a generic function:

import { Page } from '@playwright/test';
import { readFileSync } from 'fs';

const dragAndDropFile = async (
  page: Page,
  selector: string,
  filePath: string,
  fileName: string,
  fileType = ''
) => {
  const buffer = readFileSync(filePath).toString('base64');

  const dataTransfer = await page.evaluateHandle(
    async ({ bufferData, localFileName, localFileType }) => {
      const dt = new DataTransfer();

      const blobData = await fetch(bufferData).then((res) => res.blob());

      const file = new File([blobData], localFileName, { type: localFileType });
      dt.items.add(file);
      return dt;
    },
    {
      bufferData: `data:application/octet-stream;base64,${buffer}`,
      localFileName: fileName,
      localFileType: fileType,
    }
  );

  await page.dispatchEvent(selector, 'drop', { dataTransfer });
};

It will be nice to offer this directly in Playwright. Currently there is page.dragAndDrop. With this function, we can imagine adding the page.dragAndDropFile method.

[punkpeye]

I released a utility createDataTransfer that abstracts this.

[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.

[OmarovIV]

What is "data" here? Should it have been announced before?

Resolved with next code

const buffer = fs.readFileSync('PATH-TO-FILE').toString('base64')

    const dataTransfer = await this.page.evaluateHandle(async (data) => {
      const dt = new DataTransfer()

      const blobData = await fetch(data).then(res => res.blob())

      const file = new File([blobData], 'equity.box.gz', { type: 'application/gzip' })
      dt.items.add(file)
      return dt
    }, 'data:application/octet-stream;base64,' + buffer)

    await this.page.dispatchEvent('LOCATOR', 'drop', { dataTransfer })
  }

[sergtimosh]

What is "data" here? Should it have been announced before?

The second argument to this.page.evaluateHandle() is 'data:application/octet-stream;base64,' + buffer.
This is the value that gets passed as data to the function being evaluated on the page.

[sytolk]

I have js error at page.dispatchEvent('LOCATOR', 'drop', { dataTransfer })

Uncaught Invariant Violation: Cannot call hover while not dragging.

[raphael-arce]

I had the same issue, the problem is that you need to dispatch dragenter and dragover before dispatching drop. This is what the browser is warning you about. See this example:

const dataTransfer = await page.evaluateHandle(
	async ({ bufferData, localFileName, localFileType }) => {
		const dataTransfer = new DataTransfer();

		const blob = await fetch(bufferData).then((res) => res.blob());

		const file = new File([blob], localFileName, { type: localFileType });
		dataTransfer.items.add(file);
		return dataTransfer;
	},
	{
		bufferData: `data:application/octet-stream;base64,${buffer}`,
		localFileName: fileName,
		localFileType: fileType,
	},
);

const dropZone = page.getByText("<YOUR LOCATOR TEXT>");

await dropZone.dispatchEvent("dragenter", { dataTransfer }); // <-- this is needed first
await dropZone.dispatchEvent("dragover", { dataTransfer }); // <-- this is needed second
await dropZone.dispatchEvent("drop", { dataTransfer }); // <-- then we can drop safely