title: Dropzone.js: Can't click on custom preview
body: <p>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</p>
  
  <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.</p>
  
  <p>I've put this into a fiddle: <a href="http://jsfiddle.net/timgavin/Labn3qg4/" rel="nofollow">http://jsfiddle.net/timgavin/Labn3qg4/</a> </p>
  
  <pre><code>&lt;form id="form-post-photo" method="post" enctype="multipart/form-data" role="form" accept-charset="UTF-8"&gt; 
       &lt;div class="dropzone dz-clickable dz-default dz-file-preview" id="previews"&gt;
          &lt;div class="dz-message"&gt;
              &lt;h2&gt;&lt;i class="glyphicon glyphicon-cloud-upload"&gt;&lt;/i&gt;&lt;br&gt;drag images here&lt;/h2&gt;or tap/click to select
          &lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="form-group"&gt;
          &lt;input type="text" name="caption" id="caption" class="form-control" placeholder="Caption (optional)"&gt;
      &lt;/div&gt;
      &lt;button type="button" id="btn-clear" class="btn btn-danger"&gt;Clear&lt;/button&gt;
      &lt;button type="submit" id="btn-submit" class="btn btn-default"&gt;Upload&lt;/button&gt;
  &lt;/form&gt;
  </code></pre>
  
  <hr>
  
  <pre><code>&lt;script&gt;
  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('&lt;i class="glyphicon glyphicon-trash text-danger"&gt;&lt;/i&gt;');
              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);
          });
      }
  };
  &lt;/script&gt;
  </code></pre>