JS Drag and Drop 2 file count

index.html

<div id="dropzone" effectAllowed="move">Drop files here!</div>
<ul id="items"></ul>

js-drag-and-drop-2-file-count.markdown

JS Drag and Drop 2 file count

A Pen by stephanie frantz on CodePen.

License.

script.js

// Drop handler function to get all files
rows = []

async function getAllFileEntries(dataTransferItemList) {
  let fileEntries = [];
  // Use BFS to traverse entire directory/file structure
  let queue = [];
  // Unfortunately dataTransferItemList is not iterable i.e. no forEach
  for (let i = 0; i < dataTransferItemList.length; i++) {
    queue.push(dataTransferItemList[i].webkitGetAsEntry());
  }
  while (queue.length > 0) {
    let entry = queue.shift();
    if (entry.isFile) {
      ///////This is where we load the entries into an array
      rows.push(entry.fullPath)
      console.log(entry.fullPath)
      fileEntries.push(entry);
    } else if (entry.isDirectory) {
      let reader = entry.createReader();
      queue.push(...await readAllDirectoryEntries(reader));
    }
  }
  return fileEntries;
}

// Get all the entries (files or sub-directories) in a directory by calling readEntries until it returns empty array
async function readAllDirectoryEntries(directoryReader) {
  let entries = [];
  let readEntries = await readEntriesPromise(directoryReader);
  while (readEntries.length > 0) {
    entries.push(...readEntries);
    //console.log(entries)
    readEntries = await readEntriesPromise(directoryReader);
  }
  return entries;
}

// Wrap readEntries in a promise to make working with readEntries easier
async function readEntriesPromise(directoryReader) {
  try {
    return await new Promise((resolve, reject) => {
      directoryReader.readEntries(resolve, reject);
    });
  } catch (err) {
    console.log(err);
  }
}

var elDrop = document.getElementById('dropzone');
var elItems = document.getElementById('items');

elDrop.addEventListener('dragover', function (event) {
    event.preventDefault();
    elItems.innerHTML = 0;
});

elDrop.addEventListener('drop', async function (event) {
    event.preventDefault();
    let items = await getAllFileEntries(event.dataTransfer.items);
    elItems.innerHTML = items.length;
  console.log(items.length)
  console.log(rows)
  
});

style.css

#dropzone {
    background-color: #cfc;
    border: solid 3px #9c9;
    color: #9c9;
    min-height: 50px;
    padding: 20px;
    text-shadow: 1px 1px 0 #fff;
}
#items:empty::before {
    color: #ccc;
    content:"(File counts will be shown here.)";
}