How to make only the Dropzone.js Previews Div clickable and not the whole form

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 ?.

Mcqueen

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.

Lutz

Thanks just adding clickable:'#dropzonePreview' worked like magic.However i think adding dz-message class to the preview div would make it invisible(display:none) so i removed that class. My div looks like this now <div id = "dropzonePreview" class="dropzone-previews dz-default"></div> – Mcqueen

Just FYI to anyone else reading this, this solution only seems to work if clickable is provided an ID. If you try and set it using a class, it won't work – Little

^ thats a bug with your specific configuration. adding classes as 'clickable' works fine. – Lianneliao

I have the same problem with classes, can only add elements as clickable if they have an ID. – Hrutkay

@Lutz - how can I integrate dropzone in bootstrap markdown editor ? – Errolerroll

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;

Ossein

I just want to make the previewsContainer clickable . The whole form must not be clickable . I tried adding dz-clickable class to the previewsContainer div but that didnt work . – Mcqueen

i know that but i want to submit both files and inputs in the form .. your example will only submit the files not the inputs isn't it ? – Mcqueen

Hi can you please tell me what to pass inside url url: "/file/post" – Sturdy

@mlets3113858 url: holds the server-side route to process the image upload. if you have a PHP script it could be example.com/app/upload.php or something similar. – Ossein

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."

Recce

Dear Art, could you add some code to illustrate your answer? – Bozarth