[Question] How to drag and drop files

[A-ZC-Lau]

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?

[pavelfeldman]

You would be using Web APIs to create File objects and adding them into the datatransfer items, inside the first evaluate.

[A-ZC-Lau]

@pavelfeldman Can you provide an example?

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

[punkpeye]

I released a utility createDataTransfer that abstracts this.

[kovacsdongo]

Hi all
I use this code:
`import { readFileSync } from 'fs';
const buffer = readFileSync('./fixtures/2.pdf');

  // Create the DataTransfer and File
  const dataTransfer = await page.evaluateHandle((data) => {
    const dt = new DataTransfer();
    // Convert the buffer to a hex array
    const file = new File([data.toString('hex')], '2.pdf', { type: 'application/pdf' });
    dt.items.add(file);
    return dt;
  }, buffer);
  
  // Now dispatch
  await page.dispatchEvent("//div[@class='flex ng-star-inserted']", 'drop', { dataTransfer });
  `
  
 the suite is pass, but i can not see on the UI or in the result article
  evaluateHandler and dispatchevent also pass

(on the webpage there is full page drag& drop function)

[galvin59]

Hi,
Has someone already managed to port the code above to c# using the .net library ?
Thanks !

[mraspe]

Hi, how to drop images (e.g. PNG) in a certain area? Analogous to the example above?