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.         


        

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:

  Drop files here to upload

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.