Dropzone

Dropzone is a simple JavaScript library that helps you add file drag and drop functionality to your web forms. It is one of the most popular drag and drop library on the web and is used by millions of people. For more, please visit the plugin's official site .

Basic Example

Preview

<form class="form" method="post">
  <div
    class="dropzone"
    id="lpx-dropzone_1"
    action="this.element.getAttribute('action');"
  >
    <div class="dz-message">
      <i class="bi bi-file-earmark-arrow-up text-primary fs-1"></i>

      <div class="ms-2 text-start">
        <h5 class="text-dark mb-0">Drop files here or click to upload.</h5>
        <small class="text-primary">Upload up to 10 files</small>
      </div>
    </div>
  </div>
</form>

var myDropzone = new Dropzone("#lpx-dropzone_1", {
  url: null,
  paramName: "file",
  maxFiles: 10,
  maxFilesize: 10,
  addRemoveLinks: true,
  accept: function (file, done) {
    if (file.name == "hello.jpg") {
      done("Naha, you don't.");
    } else {
      done();
    }
  },
});

var minSteps = 6,
  maxSteps = 60,
  timeBetweenSteps = 100,
  bytesPerStep = 100000;

myDropzone.uploadFiles = function (files) {
  var self = this;

  for (var i = 0; i < files.length; i++) {
    var file = files[i];
    var totalSteps = Math.round(
      Math.min(maxSteps, Math.max(minSteps, file.size / bytesPerStep))
    );

    for (var step = 0; step < totalSteps; step++) {
      var duration = timeBetweenSteps * (step + 1);
      setTimeout(
        (function (file, totalSteps, step) {
          return function () {
            file.upload = {
              progress: (100 * (step + 1)) / totalSteps,
              total: file.size,
              bytesSent: ((step + 1) * file.size) / totalSteps,
            };

            self.emit(
              "uploadprogress",
              file,
              file.upload.progress,
              file.upload.bytesSent
            );
            if (file.upload.progress == 100) {
              file.status = Dropzone.SUCCESS;
              self.emit("success", file, "success", null);
              self.emit("complete", file);
              self.processQueue();
              //document.getElementsByClassName("dz-success-mark").style.opacity = "1";
            }
          };
        })(file, totalSteps, step),
        duration
      );
    }
  }
};