如何只使Dropzone.js预览Div可点击而不是整个表格

Question

I have to use dropzone.js form, which sends a couple of inputs and a file upload info to the other page.

My dropzone code looks like this -- >

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 );
        });

  }

};

But I want to make only the Previews container both Clickable and Drag and Drop ,which I have set by using previewsContainer: '#dropzonePreview' , but not the whole form .

If I use clickable:false I wont be able to click on previews div to show the file upload dialog box and also even if I drag n drop the file anywhere on the form it takes it. I dont want that to happen I just want the Previews container to be drag n drop AND Clickable but at the same time if I click on submit the whole form must get uploaded.

I have read this dropzone tutorial Combine normal form with Dropzone but thats just the half of what i actually want to do.

Is there any way we can achieve all of this using Dropzone efficiently ?.

Answer 1

I have been working on this as well and finally stumbled across the answer on the bootstrap page.

The key is setting the clickable: option to wherever you want your active Dropzone area to be. Using your example, if you want your preview area to also be your drop/click area, set clickable:'#dropzonePreview', and that will make that area active. If you want the "Drop Files" image displayed in there as well use this:

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

This allows you to use a single Dropzone form (thus all fields get submitted as one) while still allowing you to have a smaller area designated for dropping/clicking.

One note though, don't make it too small, as if you drag and drop outside the area it loads the image in the browser in place of the page.

Answer 2

Alternatively you can create dropzones programmaticaly (even on non form elements) by instantiating the Dropzone class http://www.dropzonejs.com/#toc_4

You need to add the dz-clickable class to your desired element.

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" });

Note

If you receive a console error saying: Dropzone already attached , make sure to add this line before initiating your new Dropzone object.

Dropzone.autoDiscover = false;

Answer 3

The documentation says to set the option: "clickable: true", but...

My problem was I had added visible markup within the upload form (box). If you want every point in the box to be clickable, you can't include any other visible markup in your view, you need to add it to the option "dictDefaultMessage."