How to submit dropzone.js with different buttons?

@muriel.schmidt 

1. Create multiple buttons for uploading files with Dropzone.js:

First, you will need to create multiple buttons in your HTML file and add the necessary attributes for Dropzone.js to recognize them as file upload buttons. For example:

1
2

<button id="button1" class="dropzone">Upload Files 1</button>
<button id="button2" class="dropzone">Upload Files 2</button>

1. Initialize Dropzone with the different buttons:

Next, you will need to initialize Dropzone with the different buttons and specify the options for each button. You can do this by targeting each button using its ID and passing the specific options for each button. For example:

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

Dropzone.options.button1 = {
  paramName: "file1",
  url: "/upload1",
  maxFilesize: 1,
  acceptedFiles: "image/*"
};

Dropzone.options.button2 = {
  paramName: "file2",
  url: "/upload2",
  maxFilesize: 2,
  acceptedFiles: "video/*"
};

1. Handle file upload events for each button:

You can also add event listeners to handle the file upload events for each button separately. For example, you can listen for the success event to display a message when a file is successfully uploaded using a specific button:

1
2
3
4
5
6
7

document.getElementById("button1").addEventListener("success", function(file) {
  console.log("File 1 uploaded successfully!");
});

document.getElementById("button2").addEventListener("success", function(file) {
  console.log("File 2 uploaded successfully!");
});

By following these steps, you can submit Dropzone.js with different buttons and customize the options and event handling for each button separately.