无法在我的asp.net应用程序中使用jQuery单击拖放区

Question

I am working on an asp.net web form application where I have to use a drop-zone so that users can upload files on it.

On my existing code, the drop-zone is working fine. Files are uploading appropriately when I release them on the drop-zone, However, I want to make it clickable so that when a user will click anywhere in that zone, the file upload dialog must open so that a file can be selected for upload.

I have searched for different techniques on google but unable to find the right code which can work in my case. Is there any way that can help me achieve my goal easily?

My drop-zone HTML is here.

<div id="dZUpload" class="dropzone">
  <div class="dz-default dz-message"></div>
</div>

I am looking to achieve this goal with the following jQuery code in document.ready.

          var userEmail = $("#hdnFolderPath").val();
          var uploadButton = document.querySelector("#upload");

          Dropzone.autoDiscover = false;

          $("#dZUpload").dropzone({
              url: "/ReceiptStorage/Handlers/FileHandler.ashx",
              params: {
                  DestinationPath: userEmail
              },
              autoProcessQueue: false,
              addRemoveLinks: true,

              init: function () {
                  var uploadButton = document.querySelector("#upload");
                  var dZUpload = this; //closure

                  dZUpload.on("complete", function (file, response) {
                      if (file.status === 'success') {
                          dZUpload.removeFile(file);
                          LoadFiles($("#hdnFolderPath").val());
                      }
                  });
                  dZUpload.on('error', function (file, response) { 
                  });
                  uploadButton.addEventListener("click", function () {
                      if (dZUpload.files.length > 0)
                          dZUpload.processQueue();
                  });
              }    
          });

Answer 1

I was missing clickable feature within my code. By including clickable: true, above

init: function () {

I am able to see the file upload dialog open after clicking anywhere in the drop-zone.