title: Dropzone js not showing buttons
body: <p>I'd appreciate some help with sorting out my dropzone.</p>
  
  <p>I'm trying to setup Dropzone on my site, using the example code given on the dropzone website (<a href="http://www.dropzonejs.com/bootstrap.html" rel="nofollow">http://www.dropzonejs.com/bootstrap.html</a>). I get an error: </p>
  
  <blockquote>
    <p>Invalid Dropzone Element</p>
  </blockquote>
  
  <p>I can see the three buttons load initially and then they disappear and I get an empty div.</p>
  
  <pre><code>            &lt;div class="sixteen columns omega"&gt;
              &lt;div class="page"&gt;
                  &lt;div class="page-inner" id="dropzone"&gt;
                      &lt;div class="table table-striped" class="files" id="previews"&gt;
                          &lt;div id="template" class="file-row"&gt;
                          &lt;!-- This is used as the file preview template --&gt;
                          &lt;div&gt;
                              &lt;button class="btn btn-primary start"&gt;
                                  &lt;i class="glyphicon glyphicon-upload"&gt;&lt;/i&gt;
                                  &lt;span&gt;Start&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;button data-dz-remove class="btn btn-warning cancel"&gt;
                                  &lt;i class="glyphicon glyphicon-ban-circle"&gt;&lt;/i&gt;
                                  &lt;span&gt;Cancel&lt;/span&gt;
                              &lt;/button&gt;
                              &lt;button data-dz-remove class="btn btn-danger delete"&gt;
                              &lt;i class="glyphicon glyphicon-trash"&gt;&lt;/i&gt;
                              &lt;span&gt;Delete&lt;/span&gt;
                              &lt;/button&gt;
                          &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/div&gt;
                  &lt;/div&gt;
                  &lt;div class="clearfix"&gt;&lt;/div&gt;
              &lt;/div&gt;
          &lt;/div&gt;
  
  &lt;script type="text/javascript"&gt;
      var previewNode = document.querySelector("div#template");
      previewNode.id = "";
      var previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);
  
      var myDropzone = new Dropzone(document.section, { // Make the whole body a dropzone
          url: "/target-url",
          thumbnailWidth: 80,
          thumbnailHeight: 80,
          parallelUploads: 20,
          previewTemplate: previewTemplate,
          autoQueue: false, // Make sure the files aren't queued until manually added
          previewsContainer: "#previews", // Define the container to display the previews
          clickable: ".fileinput-button" // Define the element that should be used as click trigger to select files.
      });
  
      myDropzone.on("addedfile", function (file) {
          // Hookup the start button
          file.previewElement.querySelector(".start").onclick = function () { myDropzone.enqueueFile(file); };
      });
  
      // Update the total progress bar
      myDropzone.on("totaluploadprogress", function (progress) {
          document.querySelector("#total-progress .progress-bar").style.width = progress + "%";
      });
  
      myDropzone.on("sending", function (file) {
          // Show the total progress bar when upload starts
          document.querySelector("#total-progress").style.opacity = "1";
          // And disable the start button
          file.previewElement.querySelector(".start").setAttribute("disabled", "disabled");
      });
  
      // Hide the total progress bar when nothing's uploading anymore
      myDropzone.on("queuecomplete", function (progress) {
          document.querySelector("#total-progress").style.opacity = "0";
      });
  
      // Setup the buttons for all transfers
      // The "add files" button doesn't need to be setup because the config
      // `clickable` has already been specified.
      document.querySelector("#actions .start").onclick = function () {
          myDropzone.enqueueFiles(myDropzone.getFilesWithStatus(Dropzone.ADDED));
      };
      document.querySelector("#actions .cancel").onclick = function () {
          myDropzone.removeAllFiles(true);
      };
  &lt;/script&gt;
  </code></pre>