JSFiddle - React, Tailwind, and code Playground

by graphettion

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.css">
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.3.0/min/dropzone.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<div class="container">
  <div class="table table-striped previews">
    <div class="file-row template">
      <div>
        <span class="preview"><img data-dz-thumbnail /></span>
      </div>
      <div>
        <p class="name" data-dz-name></p>
        <strong class="error text-danger" data-dz-errormessage></strong>
      </div>
      <div>
        <p class="size" data-dz-size></p>
        <div class="progress progress-striped active" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0">
          <div class="progress-bar progress-bar-success" data-dz-uploadprogress></div>
        </div>
      </div>
      <div>
        <button class="btn btn-primary start">
          <i class="glyphicon glyphicon-upload"></i>
          <span>Start</span>
        </button>
        <button data-dz-remove class="btn btn-warning cancel">
          <i class="glyphicon glyphicon-ban-circle"></i>
          <span>Cancel</span>
        </button>
        <button data-dz-remove class="btn btn-danger delete">
          <i class="glyphicon glyphicon-trash"></i>
          <span>Delete</span>
        </button>
      </div>
    </div>
  </div>

  <div class="row actions">

    <div class="col-lg-7">
      <span class="btn btn-success btn-fileinput dz-clickable">
            <i class="glyphicon glyphicon-plus"></i>
            <span>Add files...</span>
      </span>
      <button type="submit" class="btn btn-primary start">
        <i class="glyphicon glyphicon-upload"></i>
        <span>Start upload</span>
      </button>
      <button type="reset" class="btn btn-warning cancel">
        <i class="glyphicon glyphicon-ban-circle"></i>
        <span>Cancel upload</span>
   ...

CSS

html,
body {
  height: 100%;
}

.actions {
  margin: 2em 0;
}


/* Mimic table appearance */

div.table {
  display: table;
}

div.table .file-row {
  display: table-row;
}

div.table .file-row > div {
  display: table-cell;
  vertical-align: top;
  border-top: 1px solid #ddd;
  padding: 8px;
}

div.table .file-row:nth-child(odd) {
  background: #f9f9f9;
}


/* The total progress gets shown by event listeners */

.total-progress {
  opacity: 0;
  transition: opacity 0.3s linear;
}


/* Hide the progress bar when finished */

.previews .file-row.dz-success .progress {
  opacity: 0;
  transition: opacity 0.3s linear;
}


/* Hide the delete button initially */

.previews .file-row .delete {
  display: none;
}


/* Hide the start and cancel buttons and show the delete button */

.previews .file-row.dz-success .start,
.previews .file-row.dz-success .cancel {
  display: none;
}

.previews .file-row.dz-success .delete {
  display: block;
}

JavaScript

var previewNode = document.querySelector(".template");
previewNode.id = "";
var previewTemplate = previewNode.parentNode.innerHTML;
previewNode.parentNode.removeChild(previewNode);

var myDropzone = new Dropzone(".previews", {
  url: "/target-url",
  thumbnailWidth: 80,
  thumbnailHeight: 80,
  parallelUploads: 20,
  previewTemplate: previewTemplate,
  autoQueue: true,
  clickable: ".btn-fileinput"
});

myDropzone.on("addedfile", function(file) {
  // Hookup the start button
  file.previewElement.querySelector(".start").onclick = function() {
    myDropzone.enqueueFile(file);
  };
});

// Update the total progress bar
myDropzone.on("totaluploadprogress", function(progress) {
  document.querySelector(".total-progress .progress-bar").style.width = progress + "%";
});

myDropzone.on("sending", function(file) {
  // Show the total progress bar when upload starts
  document.querySelector(".total-progress").style.opacity = "1";
  // And disable the start button
  file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
});

// Hide the total progress bar when nothing's uploading anymore
myDropzone.on("queuecomplete", function(progress) {
  document.querySelector(".total-progress").style.opacity = "0";
});

// Setup the buttons for all transfers
// The "add files" button doesn't need to be setup because the config
// `clickable` has already been specified.
document.querySelector(".actions .start").onclick = function() {
  myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
};
document.querySelector(".actions .cancel").onclick = function() {
  myDropzone.removeAllFiles(true);
};