How to program Drag and Drop of files in HTML and Javascript?

To implement Drag and Drop for files we need to designate a particular area in the html page as a drop area. This is done by preventing the defaults in that element.
Let us start by simply creating a html page and marking a particular area as a drop target.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/><title>File Reading</title>
</head>
<body>
<h2>Files Details</h2>
<br/>
<div style="height:250px;" class="w3-green" >
<p>Drag one or more files to this place</p>
</div>
</body>
</html>

Open the html file in a browser and drag a picture over it.

The browser shows this to be a Copy operation. Drop the file and the browser will display the picture.

This is the default behavior for a browser when a file is dropped.
Now, we will override this default drag behavior.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>File Reading</title>
<script>
function dragOverHandler(ev)
{
ev.preventDefault();
}
</script>
</head>
<body>
<h2>Files Details</h2>
<br/>
<div style="height:250px;" class="w3-green" ondragover="dragOverHandler(event);" >
<p>Drag one or more files to this place</p>
</div>
</body>
</html>

We have defined a handler for the ondragover event and prevented the default handling of the event. What happens now?

Instead of copy, it shows the operation move. The effect of overriding ondragover and preventing the default operation. Drop the file and it will work like before because the ondrop method hasn’t been handled and default is not prevented.

Let us prevent the default drop operation and view the result now.

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>File Reading</title>
<script>
function dropHandler(ev)
{
ev.preventDefault();
}
function dragOverHandler(ev)
{
ev.preventDefault();
}
</script>
</head>
<body>
<h2>Files Details</h2>
<br/>
<div style="height:250px;" class="w3-green" ondrop="dropHandler(event)" ondragover="dragOverHandler(event);" >
<p>Drag one or more files to this place</p>
</div>
</body>
</html>

Now, the drag event will show move and the drop will do nothing.
The drop event receives an object of the type ev.dataTransfer.items. This is a collection of all the items that are being dropped. We can simply loop through the collection and access all the items. If nothing has been dropped then the collection will be null. We will also display the pics in a div.
The complete code.

 

<!DOCTYPE HTML>
<html>
<head>
<link rel="stylesheet" href="style.css"/>
<title>File Reading</title>
<script>
function dropHandler(ev)
{
ev.preventDefault();
addStep("Drop Over " + ev);
addStep("Drop Over " +
ev.dataTransfer.items );
if (ev.dataTransfer.items)
{
var count=ev.dataTransfer.items.length;
addStep("No of items " + count);
var idiv=document.getElementById("dImg");
idiv.innerHTML="";
for(var i=0;i<=count-1;i++)
{
if(ev.dataTransfer.items[i].kind === 'file')
{
var file=ev.dataTransfer.items[i].getAsFile();
addStep("Item [" + (i+1) + "] " + file + ", size = " + file.size + ",name = " + file.name + ", type=" + file.type + "\n");
var src= URL.createObjectURL(file);
idiv.innerHTML+="<img src='" + src + "'/><br/>";
}
}
}
}
function dragOverHandler(ev)
{
ev.preventDefault();
addStep("Drag Over " + ev);
}
function addStep(data)
{
var x=document.getElementById("txtSteps");
x.value=x.value + data + "\n"
}
</script>
</head>
<body>
<h2>Files Details</h2>
<textarea id="txtSteps" class="w3-input" style="max-height: 150px;">
</textarea>
<div id="dImg"></div>
<br/>
<div style="height:250px;" class="w3-green" id="drop_zone" ondrop="dropHandler(event);" ondragover="dragOverHandler(event);">
<p>Drag one or more files to this Drop Area </p>
</div>
</body>
</html>

File Drag and Drop Demo




Leave a Reply