JSFiddle - React, Tailwind, and code Playground

Drag and Drop Files Panes - Div Layout V2

by skibulk

HTML

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/css/all.min.css">
<div id="toolbar_outer">
  <div id="toolbar_inner">
    <div class="button"><i class="fas fa-mouse-pointer"></i></div>
    <div class="button"><i class="fas fa-level-down-alt"></i></div>
    <div class="button"><i class="fas fa-angle-double-left"></i></div>
    <div class="button"><i class="fas fa-angle-double-right"></i></div>
    <div class="button"><i class="fas fa-trash"></i></div>
  </div>
</div>
<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><label id="top_browse" for="top_input" class="button">Browse</label> <span class="button">Clear</span></p>
      <input id="top_input" type="file" multiple>
    </div>
  </div>
  <div id="top_gallery" class="gallery">
  </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><label id="bottom_browse" for="bottom_input" class="button">Browse</label> <span class="button">Clear</span></p>
      <input id="bottom_input" type="file" multiple>
    </div>
  </div>
  <div id="bottom_gallery" class="gallery">
  </div>
</div>

CSS

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

html,
body {
  /* Set to viewport height, otherwise rows won't know how tall to be */
  height: 100%;
}

body {
  /* Set to viewport width, but allow to expand with children */
  display: inline-block;
  min-width: 100%;
  
  /* Show scrollbar by default, otherwise row hight will change when images are added */
  overflow-x: scroll;
}

.row {
  margin-left: 60px;
  height: 50%;
  white-space: nowrap;
}

#top_row {
  padding: 15px 15px 8px 15px;
}

#bottom_row {
  padding: 7px 15px 15px 15px;
}

.dropzone, .gallery, .col {
  display: inline-block;
  height: 100%;
  text-align: top;
}

.dropzone {
  border: 2px dashed #aaa;
  border-radius: 15px;
  font: Arial, sans-serif;
  color: #666;
  text-align: center;
  user-select: none;
}

.dropzone .col {
  padding: 10px;
}

.col {
  width: 200px;
  white-space: normal;
  overflow: hidden;
}

.gallery .col {
  margin-left: 15px;
}

.button {
  border: 1px solid #aaa;
  border-radius: 5px;
  margin: 5px 0;
  padding: 5px 10px;
  text-align: center;
}

.dropzone .button {
  display: inline-block;
}

.button:hover{
  background: #eee;
}

input {
  display: none;
}

#toolbar_outer {
  display: table;
  border-right: 1px solid #aaa;
  
  position: fixed;
  top: 0;
  height: 100%;
  
  background: #eee;
}

#toolbar_inner {
  display: table-cell;
  vertical-align: middle;
  padding: 10px;
}

JavaScript

dropzone("#top_dropzone", "#top_gallery");
dropzone("#bottom_dropzone", "#bottom_gallery");

function dropzone(zone, gallery){
	$(zone + " input").change(function(event) {
    event.stopPropagation();
    event.preventDefault();

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

      $(gallery).append(
        "<div class='col file_info'>" +
        "Name: " + this.name +
        " | Type: " + this.type +
        " | Size: " + Math.floor(this.size / 1024 / 1024 * 100) / 100 +
        " MB</div>"
      );
    });
  });
}