How to integrate Dropzone.js into existing HTML form with other fields with JavaScript?

To integrate Dropzone.js into existing HTML form with other fields with JavaScript, we set the Dropzone.options.fileUpload property.

For instance, we write

<form role="form" enctype="multipart/form-data" action="/url" method="post">
  <input hidden id="file" name="file" />

  <div class="dropzone dropzone-file-area" id="fileUpload">
    <div class="dz-default dz-message">
      <h3 class="sbold">Drop files here to upload</h3>
      <span>You can also click to open file browser</span>
    </div>
  </div>

  <button type="submit">Submit</button>
</form>

to add a form.

Then we write

Dropzone.options.fileUpload = {
  url: "blackHole.php",
  addRemoveLinks: true,
  accept: (file) => {
    let fileReader = new FileReader();

    fileReader.readAsDataURL(file);
    fileReader.onloadend = () => {
      let content = fileReader.result;
      $("#file").val(content);
      file.previewElement.classList.add("dz-success");
    };
    file.previewElement.classList.add("dz-complete");
  },
};

to set Dropzone.options.fileUpload to an object that has the upload url and an accept function.

In the accept method, we create a FileReader object to read the file.

And we get the file result from the onloadend method.

We get the read file as a base64 URL with fileReader.result.

We read the file with readAsDataURL.