CODEWITHSUNDEEP
drag-and-dropdropzone.js
Uchechi Odunze
Uchechi Odunze

Reputation: 51

How to add a submit button to dropzone

Hello everyone i am using dropzone.js to upload pictures to the server with php, but i kind of having problem with it.

I was wondering if there is anyway to disable the dropzone.js auto upload to the server on drag and drop image or on click and select image and use a clickable submit button to manually submit the image to the server

Please any advice or help perhaps a simple code will be appreciated.

Edited

I still haven't got an answer to my questions.

Seriously i feel like this people building this stuff doesn't got it right because the stuff is useless in someways, are they trying to tell me that when a user uploads its profile picture and the dropzone will be stuck there looking at them and them looking at it without a submit button or a confirmation message that the picture has been uploaded then they should continue? seriously?

Upvotes: 4

Views: 6901

Answers (1)

Mohamed Gamal Hemeda
Mohamed Gamal Hemeda

Reputation: 21

You can define button in your HTML Form such as

<button id="submit-all">Submit all files</button>

and then add this script

Dropzone.options.myDropzone = {
  // Prevents Dropzone from uploading dropped files immediately
  autoProcessQueue: false,
  acceptedFiles: ".png,.jpg,.gif,.bmp,.jpeg",
  maxFilesize: 1,
  parallelUploads: 10,
  addRemoveLinks: true,
  init: function() {
    var submitButton = document.querySelector("#submit-all")
    myDropzone = this; // closure

    submitButton.addEventListener("click", function() {
      myDropzone.processQueue(); 
      // autoProcessQueue: true// Tell Dropzone to process all queued files.
    });

    // You might want to show the submit button only when 
    // files are dropped here:
    this.on("addedfile", function() {
      // Show submit button here and/or inform user to click it.
    });
  }
};

Hope this solves the problem.

Reference: https://github.com/enyo/dropzone/wiki/Upload-all-files-with-a-button

Upvotes: 2

Related Questions