D3 Examples - HTML5 drag/drop

xxxxxxxxxx
 
<html>
  <head>
    <title>HTML5 drag/drop files to console.log them</title>
  </head>
  <body>
    <script>
      
// this should probably be a more interesting function in your case
function show(...files) {
  console.log(...files);
}
​
function loadFileAsText(file) {
  return new Promise((resolve, reject) => {
    const reader = new FileReader;
    reader.onload = (e) => resolve(e.target.result);
    reader.readAsText(file);
  });
}
​
function handleDrop(event) {
  event.stopPropagation();
  event.preventDefault();
  const files = Array.from(event.dataTransfer.files); // was a FileList object
  return Promise.all(files.map(loadFileAsText)).then(show);
}
​
// needed, so the native drag/drop handler won't kick in to show the dropped file
function handleDragOver(event) {
  event.stopPropagation();
  event.preventDefault();
  event.dataTransfer.dropEffect = 'copy'; // Give nice visual cursor indicator
}
​
document.body.addEventListener('dragover', handleDragOver);
document.body.addEventListener('drop', handleDrop);
​
    </script>
  </body>
</html>
    