Receiving a File Drop

This example program demonstrates how to receive a file drop event in JavaScript.

FileDrop.html

<!DOCTYPE html>
<html>
  <head>
    <title>XoaX.net JavaScript</title>
    <script type="text/javascript" src="FileDrop.js"></script>
  </head>
  <body>
    <h3>Drag and drop your files here</h3>
    <div id="idFilenames">
    </div>
  </body>
</html>

FileDrop.js

document.addEventListener('drop', (e) => {
  e.preventDefault();
  e.stopPropagation();
  var qFileDiv = document.getElementById("idFilenames");
  qFileDiv.innerHTML = "<b>These are the files that you dropped here:</b><br />";
  // Cycle through the dropped files.
  for (const qCurrFile of e.dataTransfer.files) {
    qFileDiv.innerHTML += qCurrFile.name + "<br />";
  }
});

document.addEventListener('dragover', (e) => {
  e.preventDefault();
  e.stopPropagation();
});

Core JavaScript

Receiving a File Drop

FileDrop.html

FileDrop.js

Output