Drag Drop image file into html page?

Greetings ,

I can drag drop an image already on page ,
But How to Drag Drop “image file” into html page ,
I don’t want to Upload , just DnD .

#div1 {
  width: 100px;
  height: 200px;
  padding: 10px;
  border: 1px solid #aaaaaa;
function allowDrop(ev) {

function drag(ev) {
  ev.dataTransfer.setData("text", ev.target.id);

function drop(ev) {
  var data = ev.dataTransfer.getData("text");
<body  ondrop="drop(event)" ondragover="allowDrop(event)">

<p>Drag image into the rectangle:</p>

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<img id="drag1" src="https://m.media-amazon.com/images/W/MEDIAX_849526-T1/images/I/71nMsinO2sL._AC_SX679_.jpg" draggable="true" ondragstart="drag(event)" width="100" height="200">


Thanks for your Help…

You would need to FileReader the file in from a file input as a data URL, then create a new item for dragging from that…

Thanks m_hutley ,
Very helpful: https://developer.mozilla.org/en-US/docs/Web/API/FileReader