Dropzone.js: Can't click on custom preview

Question

Dropzone.js looks to be incredibly finicky (anybody remember SCSI Voodoo?), or the documentation just stinks: whatever the reason, I could try 100 different combinations of classes and parameters and still not get anywhere - which is basically what I've been doing for the past 6 hours. :P

I'm trying to build a custom dropzone, as I don't want the whole form to be clickable. I've been at this for two days and am really close (I think?). However, I'm also now really stuck: my custom drop zone isn't clickable.

I've put this into a fiddle: http://jsfiddle.net/timgavin/Labn3qg4/

<form id="form-post-photo" method="post" enctype="multipart/form-data" role="form" accept-charset="UTF-8"> 
     <div class="dropzone dz-clickable dz-default dz-file-preview" id="previews">
        <div class="dz-message">
            <h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select
        </div>
    </div>
    <div class="form-group">
        <input type="text" name="caption" id="caption" class="form-control" placeholder="Caption (optional)">
    </div>
    <button type="button" id="btn-clear" class="btn btn-danger">Clear</button>
    <button type="submit" id="btn-submit" class="btn btn-default">Upload</button>
</form>

---

<script>
Dropzone.autoDiscover = false;

Dropzone.options.formPostPhoto = {

    url: 'file-upload.php',
    paramName: 'photo',
    autoProcessQueue: false,
    //uploadMultiple: true,
    parallelUploads: 4,
    maxFiles: 4,
    maxFileSize: 1,
    acceptedFiles: 'image/*',
    previewsContainer: '#previews',
    clickable:'.dz-clickable',

    init: function() {

        var submitButton = document.querySelector("#btn-submit")
        var myDropzone = this;

        // remove extra images
        myDropzone.on('maxfilesexceeded', function(file) {
            this.removeFile(file);
        });

        // tell dropzone to process all queued files.
        submitButton.addEventListener("click", function(e) {
            e.preventDefault();
            e.stopPropagation();
            myDropzone.processQueue();
        });

        // add a remove button to each image
        this.on('addedfile', function(file,maxFileSize) {
            var removeButton = Dropzone.createElement('<i class="glyphicon glyphicon-trash text-danger"></i>');
            var _this = this;

            // Listen to the click event
            removeButton.addEventListener("click", function(e) {
                e.preventDefault();
                e.stopPropagation();
                _this.removeFile(file);
            // If you want to the delete the file on the server as well, you can do the AJAX request here.
            });

            // Add the button to the file preview element.
            file.previewElement.appendChild(removeButton);
        });

        // show the submit button only when a photo has been added
        this.on('addedfile', function() {
            $('#btn-submit').removeClass('hide').show();
            $('#btn-clear').removeClass('hide').show();
        });

        this.on('sending', function(file) {
            //alert('Sending the file' +  file.name)
        });

        this.on('queuecomplete', function(file) {
            alert('All files have been uploaded!')
        });

        // Setup the observer for the button.
        var _this = this;
        $('#btn-clear').on('click', function() {
            // Using "_this" here, because "this" doesn't point to the dropzone anymore
            _this.removeAllFiles();
            _this.removeAllFiles(true);
        });
    }
};
</script>

Answer 1

It might be that you are missing the url option that is required as Dropzone does not know where to post without an action attribute.

Refer to the Create dropzones programmatically in the dropzone documentation. For eg, I'm using the following:

<form>     
<div class="dropzone dz-default dz-file-preview dz-clickable" id="my-dropzone">
            <label class="message dz-message">
                <h2><i class="glyphicon glyphicon-cloud-upload"></i><br>drag images here</h2>or tap/click to select
            </label>
        </div>
        </form>
        <button id="submit-all">
          Submit all files
        </button> 
        <script src="{{ STATIC_URL }}js/dropzone.js"></script>
        <script type="text/javascript">
             $("div#my-dropzone").dropzone({ url: "/planner/create" })
              Dropzone.options.myDropzone = {

                    // Prevents Dropzone from uploading dropped files immediately
                    autoProcessQueue : false,

                    init : function() {
                        var submitButton = document.querySelector("#submit-all")
                        myDropzone = this;
                        $("#submit-all").hide();

                        submitButton.addEventListener("click", function() {
                            myDropzone.processQueue();
                            // Tell Dropzone to process all queued files.
                        });

                        // You might want to show the submit button only when
                        // files are dropped here:
                        this.on("addedfile", function() {
                            $("#submit-all").show();
                            // Show submit button here and/or inform user to click it.
                        });

                    }
                };
        </script>