How to set upload button in dropzone.js?

Member

by lily , in category: Javascript , 7 months ago

How to set upload button in dropzone.js?

Facebook Twitter LinkedIn Telegram Whatsapp

1 answer

Member

by adan , 7 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.

Related Threads:

How to upload more than 2 files by dropzone.js with button?
How to limit upload files in dropzone.js?
How to upload and delete files from dropzone.js?
How to turn off asynchronous image upload for dropzone.js?
How to upload multiple files using dropzone.js?
How to change image upload order in dropzone.js?