Как сделать только Dropzone.js Previews Div clickable, а не всю форму

Мне нужно использовать форму dropzone.js, которая отправляет пару входов и информацию о загрузке файла на другую страницу.

Мой код dropzone выглядит так: >

Dropzone.options.mydropzone = {
  maxFiles: 1,
  maxFilesize: 10, //mb
  acceptedFiles: 'image/*',
  addRemoveLinks: true,
  autoProcessQueue: false,// used for stopping auto processing uploads
  autoDiscover: false,
  paramName: 'prod_pic',
  previewsContainer: '#dropzonePreview', //used for specifying the previews div
  clickable: false, //used this but now i cannot click on previews div to showup the file select dialog box

  accept: function(file, done) {
    console.log("uploaded");
    done();
   //used for enabling the submit button if file exist 
    $( "#submitbtn" ).prop( "disabled", false );
  },

  init: function() {
    this.on("maxfilesexceeded", function(file){
        alert("No more files please!Only One image file accepted.");
        this.removeFile(file);
    });
      var myDropzone = this;
    $("#submitbtn").on('click',function(e) {
       e.preventDefault();
       myDropzone.processQueue();

    });

       this.on("reset", function (file) {   
              //used for disabling the submit button if no file exist 
              $( "#submitbtn" ).prop( "disabled", true );
        });

  }

};

Но я хочу сделать только контейнер Previews как Clickable, так и Drag and Drop, который я установил с помощью previewsContainer: '#dropzonePreview', , но не всей формы.

Если я использую clickable:false, я не смогу щелкнуть на предпросмотре div, чтобы показать диалоговое окно загрузки файла, а также даже если я перетащил его в любом месте формы, которую он принимает. Я не хочу, чтобы это произошло Я просто хочу, чтобы контейнер Previews был перетаскиваем n drop AND Clickable, но в то же время, если я нажимаю кнопку "Отправить", вся форма должна быть загружена.

Я прочитал этот учебник по Dropzone Объединить нормальную форму с Dropzone, но это только половина того, что я действительно хочу сделать.

Можно ли каким-либо образом добиться всего этого, используя Dropzone эффективно?

Ответ 1

Я тоже работал над этим и, наконец, наткнулся на ответ на странице bootstrap.

Ключ устанавливает параметр clickable: везде, где вы хотите, чтобы ваша активная область Dropzone была. Используя ваш пример, если вы хотите, чтобы область предварительного просмотра также была вашей областью drop/click, установите clickable:'#dropzonePreview', и это сделает эту область активной. Если вы хотите, чтобы изображение "Drop Files" также отображалось на нем, используйте это:

<div id="dropzonePreview" class="dz-default dz-message">
  <span>Drop files here to upload</span>
</div>

Это позволяет использовать отдельную форму Dropzone (таким образом, все поля передаются как единое целое), но при этом вы можете иметь меньшую область, предназначенную для удаления/щелчка.

Но одно примечание: не делайте его слишком маленьким, как если бы вы перетаскиваете его за пределы области, загружая изображение в браузере вместо страницы.

Ответ 2

В качестве альтернативы вы можете создавать программные паттерны (даже на не- элементы формы) путем создания экземпляра класса Dropzone http://www.dropzonejs.com/#toc_4

Вам нужно добавить класс dz-clickable в нужный элемент.

HTML

<div class="dropzone dz-clickable" id="myDrop">
    <div class="dz-default dz-message" data-dz-message="">
        <span>Drop files here to upload</span>
    </div>
</div>

JavaScript

// Dropzone class:
var myDropzone = new Dropzone("div#myDrop", { url: "/file/post"});

// If you use jQuery, you can use the jQuery plugin Dropzone ships with:
$("div#myDrop").dropzone({ url: "/file/post" });

Примечание

Если вы получите сообщение об ошибке консоли: Dropzone already attached, обязательно добавьте эту строку перед началом создания нового объекта Dropzone.

Dropzone.autoDiscover = false;