JSFiddle - React, Tailwind, and code Playground

Drag and Drop Files Panes - Div Layout - With JS

by skibulk

HTML

<div id="top_row" class="row">
  <div id="top_dropzone" class="dropzone">
    <div class="col">
      <p>Drag and Drop Files<br><i>or</i></p>
      <p><button id="top_browse">Browse</button></p>
      <p><button id="top_clear">Clear</button></p>
      <input id="top_input" type="file" multiple>
    </div>
  </div>
  <div id="top_gallery" class="gallery">
    <div class="col">
      <p>File 1</p>
    </div>
    <div class="col">
      <p>File 2</p>
    </div>
  </div>
</div>
<div id="bottom_row" class="row">
  <div id="bottom_dropzone" class="dropzone">
    <div class="col">
      <p>Drag and Drop Files<br><i>or</i></p>
      <p><button id="bottom_browse">Browse</button></p>
      <p><button id="bottom_clear">Clear</button></p>
      <input id="bottom_input" type="file" multiple>
    </div>
  </div>
</div>

CSS

* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

html,
body {
  display: inline-block;
  min-width: 100%;
  height: 100%; /* viewport height */
  font-size: 0;
}

.row {
  display: inline-block;
  float: left;
  clear: both;
  min-width: calc(100% - 20px);
  height: calc(50% - 15px);
  /* Subtract space between rows */
  margin: 10px;
  border-radius: 15px;
  white-space: nowrap;
  background-color: #e5e5e5;
}

.dropzone, .gallery {
  display: inline-block;
  float: left;
  clear: none;
  height: 100%;
}

#bottom_row {
  margin-top: 0;
  /* Remove double space between rows */
}

.col {
  display: inline-block;
  width: 200px;
  height: 100%;
  white-space: normal;
  overflow: hidden;
  font-size: 14px;
}

.col+.col {
  margin-left: 10px;
}

.dropzone {
  display: inline-block;
  height: 100%;
  padding: 10px;
  border: 2px dashed #aaa;
  border-radius: 15px;
  cursor: pointer;
  font: Arial, sans-serif;
  color: #666;
  text-align: center;
  user-select: none;
}

.dropzone:hover {
  border-color: darkblue;
  background: lightblue;
}

.dropzone input {
  display: none;
}

JavaScript

console.clear();
var output = $("#output");

/*$(".dropzone input").change(function(event) {

  event.stopPropagation();
  event.preventDefault();

  $(event.target.files).each(function(index) {

    $(event.target).parent().after(
      "<div class='col file_info'>" +
      "Name: " + this.name +
      " | Type: " + this.type +
      " | Size: " + Math.floor(this.size / 1024 * 100) / 100 +
      " KB</div>"
    );
  });
});*/

$('body').on(
  'dragover dragenter',
  function(event) {
    event.preventDefault();
    event.stopPropagation();
  }
);

function dropzone(id, callback){
  document.getElementById(id).addEventListener("drop", function(event) {
    event.preventDefault();
    event.stopPropagation();

    var items = event.dataTransfer.items;
    for (var i = 0; i < items.length; i++) {
      // webkitGetAsEntry is where the magic happens
      var item = items[i].webkitGetAsEntry();
      if (item) {
        traverseFileTree(item);
      }
    }
  });
  
  function traverseFileTree(item, path) {
    path = path || "";
    if (item.isFile) {
    	callback(item);
    } else if (item.isDirectory) {
      // Get folder contents
      var dirReader = item.createReader();
      dirReader.readEntries(function(entries) {
        for (var i = 0; i < entries.length; i++) {
          traverseFileTree(entries[i], path + item.name + "/");
        }
      });
    }
  }
}

function dropzoneHandler(file){
	console.log(file.name);
}

dropzone("top_row", dropzoneHandler);