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

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

Solution 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;

Comments

[Vishal Nair]

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 .

[Vishal Nair]

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 ?

[Mr.Happy]

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

[Xhezairi]

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

[Mr.Happy]

@Xhezairi Thanks for giving me the idea :)

[Vishal Nair]

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>

[Aaron Hill]

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

[trickpatty]

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

[Martin at Mennt]

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

[Suleman khan]

@ChaosTheory - how can I integrate dropzone in bootstrap markdown editor ?

[Artem]

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