title: Custom Preview Template for Dropzone JS
body: <p>I created a form with the dropzone, but I'm having issues passing the files to the server. I created a custom preview template, similar to the one on the bootstrap demo, but when I click on submit on my form, the files are not being passed to the server. Any help would be appreciated. Below is the code.</p>
  
  <pre><code> &lt;form action="&lt;?php the_permalink(); ?&gt;" method="post" class="dropzone" id="my-awesome-dropzone" enctype="multipart/form-data"&gt;
  &lt;div class="dropzoner dropzone-previews" id="dropzoner2"&gt;
            &lt;div class="dz-preview dz-file-preview" id="template"&gt;  &lt;!-- template for images --&gt;
              &lt;div class="dz-details dztemplate"&gt;
                &lt;div class="dz-filename" style="display:none;"&gt;&lt;span data-dz-name&gt;&lt;/span&gt;&lt;/div&gt;
                &lt;div class="dz-size"  style="display:none;" data-dz-size&gt;&lt;/div&gt;
                &lt;img data-dz-thumbnail /&gt;&lt;br/&gt;&lt;input type="text" class="dzinput" placeholder="Type Caption" style="font-style:italic;" /&gt;
              &lt;/div&gt;
              &lt;div class="dz-progress" style="display:none;"&gt;&lt;span class="dz-upload" data-dz-uploadprogress&gt;&lt;/span&gt;&lt;/div&gt;
              &lt;div class="dz-success-mark" style="display:none;"&gt;&lt;span&gt;✔&lt;/span&gt;&lt;/div&gt;
              &lt;div class="dz-error-mark" style="display:none;"&gt;&lt;span&gt;✘&lt;/span&gt;&lt;/div&gt;
              &lt;div class="dz-error-message" style="display:none;"&gt;&lt;span data-dz-errormessage&gt;&lt;/span&gt;&lt;/div&gt;
            &lt;/div&gt;
          &lt;/div&gt; &lt;!-- Drop Zone Area --&gt;
          &lt;div class="flrt"&gt;&lt;a href="#" class="dz-message" style="font-weight:bold; font-size:18px;"&gt;Or use the basic uploader&lt;/a&gt;&lt;/div&gt;&lt;br/&gt;
        &lt;label for="exampletitle"&gt;Title&lt;span class="required"&gt;*&lt;/span&gt;&lt;/label&gt;&lt;br/&gt;
        &lt;input type="text" name="exampletitle" id="exampletitle" class="fullwidth" required&gt;      &lt;br/&gt;&lt;br/&gt;
  &lt;input type="submit" class="btn btn-primary mypanoramabtn" style="background-color:#3ebede" value="Publish" id="submitter"/&gt;
   &lt;/form&gt;
  </code></pre>
  
  <p>My Javascript:</p>
  
  <pre><code>//getting thumbnail template
    var previewNode = document.querySelector("#template");
    previewNode.id = "";
    var previewTemplate = previewNode.parentNode.innerHTML;
    previewNode.parentNode.removeChild(previewNode);
  
   //script to handle dropzone
    jQuery("#my-awesome-dropzone").dropzone = { // The camelized version of the ID of the form element
  
    // The configuration we've talked about above
    autoProcessQueue: false,
    uploadMultiple: true,
    thumbnailWidth: 180,
    thumbnailHeight: 120,
    parallelUploads: 100,
    maxFiles: 100,
    previewTemplate: previewTemplate,
    previewsContainer: "#dropzoner2",
  
    // The setting up of the dropzone
    init: function() {
      this.on("addedfile", function(file) { document.getElementById("dropzoner2").style.background = "none";});  //will remove background after file added
      var myDropzone = this;
  
      // First change the button to actually tell Dropzone to process the queue.
      this.element.querySelector("input[type=submit]").addEventListener("click", function(e) {
        // Make sure that the form isn't actually being sent.
        e.preventDefault();
        e.stopPropagation();
        myDropzone.processQueue();
      });
  
      // Listen to the sendingmultiple event. In this case, it's the sendingmultiple event instead
      // of the sending event because uploadMultiple is set to true.
      this.on("sendingmultiple", function() {
        // Gets triggered when the form is actually being sent.
        // Hide the success button or the complete form.
  
      });
      this.on("successmultiple", function(files, response) {
        // Gets triggered when the files have successfully been sent.
        // Redirect user or notify of success.
      });
      this.on("errormultiple", function(files, response) {
        // Gets triggered when there was an error sending the files.
        // Maybe show form again, and notify user of error
      });
    }
  
  }
  </code></pre>
  
  <p>I've tried the demos on the wiki and a few others on stackoverflow, but have been unable to get this to work. Right now when I drag and drop my images, I do see the thumbnail in my template, but when I click submit, the images are not passed to the server for me to handle. ANY help would be appreciated.</p>