[Question] How to drag and drop files

How do I write a drag and drop action with a file?

There’s an example in the docs that I don’t understand

// Note you can only create DataTransfer in Chromium and Firefox
const dataTransfer = await page.evaluateHandle(() => new DataTransfer());
await element.dispatchEvent('dragstart', { dataTransfer });

How do I select a file to drag and drop?

[CharlieDigital]

Got it.

// Read your file into a buffer.
const buffer = readFileSync('./runtime_config/common/file.pdf');

// Create the DataTransfer and File
const dataTransfer = await scope.page.evaluateHandle((data) => {
    const dt = new DataTransfer();
    // Convert the buffer to a hex array
    const file = new File([data.toString('hex')], 'file.pdf', { type: 'application/pdf' });
    dt.items.add(file);
    return dt;
}, buffer);

// Now dispatch
await page.dispatchEvent('YOUR_TARGET_SELECTOR', 'drop', { dataTransfer });

If you’re in TypeScript, add this at the top of your file:

/// <reference lib="dom"/>

[Jeromearsene]

I purpose this for more generic approach.