How to drag and drop a file into a HTML page using HTML5?

As mentioned in the previous post, drag and drop got easier with HTML5.

You just mark the element to be dragged as draggable and then drag and drop it on a HTML element.

But how can files be dragged from , say your desktop , and then dropped on a HTML element, say a text area.

This can be done by the following steps:

STEP1: Write a javascript function for handling the event ondragover

STEP2: Write a javascript function for handling the event ondrop , also read the file inside it and populate the data.

STEP3: Call the above two functions from the element where you want to drop the file to (say a textarea)

STEP1: Write a javascript function for handling the event ondragover

Here is the method to be called when you start dragging over the file from your desktop :

function ondragoverHandler(event) {

  event.preventDefault();
}

You just prevent the default functioning of the browser here by calling event.preventDefault().

By default browsers don’t allow drag and drop.

STEP2: Write a javascript function for handling the event ondrop

Here we implement what to do when the file is dropped on to the HTML element (I am dropping on a text area element)

}



function onfilesdropHandler(event){


 event.stopPropagation(); 
  event.preventDefault();
 
   var files = event.dataTransfer.files;
   
   for (var i = 0, f; f = files[i]; i++) {
   
   
  let reader = new FileReader();

  reader.readAsText(f);

  reader.onload = function() {
    document.getElementById('fileContent').value = reader.result;
  };


  }
   
   
}

The method event.preventDefault() is called to prevent browsers from opening the file in a separate tab (which is the default behavior of browsers).

The method event.stopPropagation() is also required in additional by some browsers to prevent the file getting opened in another tab (Chrome doesn’t require this line of code).

Then you get the file from event.dataTransfer object.

Once obtained you loop through the list (files are fetched in a list) and use FileReader to read the file.

The contents read are then assigned to the element where you want to populate the data(text area in this case).

STEP3: Call the above two functions from the element where you want to drop the file to

I am using a text area to populate the file content:

<textarea  id="fileContent" ondragover="ondragoverHandler(event)" ondrop="onfilesdropHandler(event)"  ></textarea>

Here is the entire code:

<style>

textarea{

  width: 750px;
  height: 400px;
}
</style>
<script>


function ondragoverHandler(event) {

  event.preventDefault();
}



function onfilesdropHandler(event){


 event.stopPropagation(); 
  event.preventDefault();
 
   var files = event.dataTransfer.files;
   
   for (var i = 0, f; f = files[i]; i++) {
   
   
  let reader = new FileReader();

  reader.readAsText(f);

  reader.onload = function() {
    document.getElementById('fileContent').value = reader.result;
  };


  }
   
   
}
</script>

<h1> Drag your file here </h1>


<textarea  id="fileContent" ondragover="ondragoverHandler(event)" ondrop="onfilesdropHandler(event)"  ></textarea>

And here is the result:

That’s it!