How to set upload button in dropzone.js?

Member

by lily , in category: Javascript , 3 months ago

How to set upload button in dropzone.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by adan , 3 months ago

@lily 

To set an upload button in Dropzone.js, you can include a button element in the HTML code and add a click event listener to trigger the uploading process. Here's an example:

  1. HTML code:
1
2
3
4
5
6
<div id="myDropzone" class="dropzone">
    <div class="fallback">
        <input type="file" multiple />
        <button id="uploadButton">Upload Files</button>
    </div>
</div>


  1. JavaScript code:
 1
 2
 3
 4
 5
 6
 7
 8
 9
10
Dropzone.options.myDropzone = {
  init: function() {
    var uploadButton = document.querySelector("#uploadButton");
    var dropzone = this;

    uploadButton.addEventListener("click", function() {
      dropzone.processQueue();
    });
  }
};


In this code snippet, we add an event listener to the "Upload Files" button and call the processQueue() method of Dropzone when the button is clicked. This will trigger the uploading process for all files added to the dropzone.


Make sure to replace myDropzone with the id of your Dropzone element in the HTML code.