javascript - Simulating drag event of files dragged into browser

Question

When you drag files from desktop to browser you can retrieve files as 'FileEntry' using evt.dataTransfer.items[i].webkitGetAsEntry()

However I'm interested is it possible to create this event programatically: to transfer files (blob or created with File constructor) with drag/drop event so that the receiving handler could also extract them exactly the same way?

In my scenario the target might as well be some other site so modification or any kind of different format is not acceptable.

question from:https://stackoverflow.com/questions/65879555/simulating-drag-event-of-files-dragged-into-browser

Answer 1

There is DataTransfer constructor, so you can create one very easily, now you just have to add() a File object to its items list:

const dataTransfer = new DataTransfer();
const file = new File( [ "some content" ], "text-file.txt" );
dataTransfer.items.add( file );

const event = new DragEvent( "drop", { dataTransfer } );

ondrop = (evt) => {
  const dT = evt.dataTransfer;
  console.log( dT.items[ 0 ], dT.items[ 0 ].webkitGetAsEntry() );
};

dispatchEvent( event );