How to show upload progress percentage in dropzone.js?

@lew 

Dropzone.js does not have built-in support for displaying upload progress percentages. However, you can implement this functionality by using the uploadprogress event and updating a progress bar or text element. Here's an example of how you can show upload progress percentage in Dropzone.js:

 1
 2
 3
 4
 5
 6
 7
 8
 9
10
11
12

Dropzone.options.myDropzone = {
  url: "/upload",
  maxFilesize: 2,
  parallelUploads: 1,
  uploadprogress: function(file, progress, bytesSent) {
    var progressElement = file.previewElement.querySelector(".dz-upload-progress");
    if (progressElement) {
      progressElement.style.width = progress + "%";
      progressElement.textContent = progress + "%";
    }
  },
};

In this code snippet, we are updating the width and text content of an element with the class .dz-upload-progress inside the file's preview element to show the upload progress percentage. You can style this element as a progress bar or display it as text, depending on your preference.

Make sure to include the necessary CSS styles for the progress bar or text element in your project.