Vue

by KimNyholm

HTML

<div id="app">
    <p>Drag files and/or directories to the box below!</p>

    <div id="dropzone" v-on:drop="onDrop" v-on:dragover.prevent>
      <div id="boxtitle">Drop Files Here</div>
    </div>

    <h2>Directory tree:</h2>

    <ul id="listing"></ul>
  </div>

CSS

body {
  font: 14px "Arial", sans-serif;
}

#dropzone {
  text-align: center;
  width: 300px;
  height: 100px;
  margin: 10px;
  padding: 10px;
  border: 4px dashed red;
  border-radius: 10px;
}

#boxtitle {
  display: table-cell;
  vertical-align: middle;
  text-align: center;
  color: black;
  font: bold 2em "Arial", sans-serif;
  width: 300px;
  height: 100px;
}

Vue

new Vue({
  el: "#app",
  data: {
  },
  methods: {
    scanAndLogFiles(item, container) {
      var elem = document.createElement("li");
      elem.innerHTML = item.name;
      container.appendChild(elem);

      if (item.isDirectory) {
        var directoryReader = item.createReader();
        var directoryContainer = document.createElement("ul");
        container.appendChild(directoryContainer);

        directoryReader.readEntries(entries => {
          entries.forEach(entry => {
            this.scanAndLogFiles(entry, directoryContainer);
          });
        });
      }
    },

    onDrop(event) {
      var items = event.dataTransfer.items;

      event.preventDefault();
      listing.innerHTML = "";

      for (var i = 0; i < items.length; i++) {
        var item = items[i].webkitGetAsEntry();

        if (item) {
          this.scanAndLogFiles(item, listing);
        }
      }
    }
  }
})