Drag Drop image file into html page?

JavaScript
,
1

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 .

<!DOCTYPE HTML>
<html>
<head>
<style>
#div1 {
  width: 100px;
  height: 200px;
  padding: 10px;
  border: 1px solid #aaaaaa;
}
</style>
<script>
function allowDrop(ev) {
  ev.preventDefault();
}

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

function drop(ev) {
  ev.preventDefault();
  var data = ev.dataTransfer.getData("text");
  ev.target.appendChild(document.getElementById(data));
}
</script>
</head>
<body  ondrop="drop(event)" ondragover="allowDrop(event)">

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

<div id="div1" ondrop="drop(event)" ondragover="allowDrop(event)"></div>
<br>
<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">

</body>
</html>

Thanks for your Help…

2

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…

3

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

4

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.