title: Reset Dropzone inside a Modal box
body: <p>I have a form inside a modal box of a bootstrap theme. The form contains few input fields and a Dropzone field, all of which sends the data across to the server through ajax. After filling the form, I, obviously need to reset the form for next set of inputs. I have managed to successfully reset the form fields, EXCEPT the Dropzone image.</p>
  
  <p>So now when I click submit, after filling the form, the data is entered. On clicking the button to open the modal again to add a new set, the previous image is still shown there. I need that also to be gone.</p>
  
  <p>I kept searching for a solution on S.O and many other places. I couldn't get a solution. Any guidance is appreciated.</p>
  
  <hr>
  
  <p><strong>HTML:</strong></p>
  
  <pre><code>&lt;form enctype="multipart/form-data" id="addProductImageForm" class="dropzone dz-clickable" action="#"&gt;
    &lt;div class="dz-default dz-message" &gt;&lt;span&gt;Click here to upload Product Image&lt;/span&gt;&lt;/div&gt;
  &lt;/form&gt;
  </code></pre>
  
  <hr>
  
  <p><strong>JS:</strong></p>
  
  <pre><code>Dropzone.options.addProductImageForm = {
  paramName: "productImage", 
  maxFilesize: 2,
  maxFiles: 1,
  uploadMultiple: false,
  acceptedFiles: "image/*", 
  dictDefaultMessage: "Click to Upload",
  addRemoveLinks: true,
  accept: function(file, done) { 
      if (file.name == "bg.png") {
          done("Naha, you don't.");
      }
      else {
          done();
      }
  },
  success: function(d, response, test) {
      var value = response.replace("int(0)", "");
      var value2 = value.replace(/(\r\n|\n|\r)/gm, "");
      $('#product_imageName').val(value2);
  },
  init: function() {
      this.on("maxfilesexceeded", function(file) {
          alert("No more files please!");
      });
  }
  };
  $("#addProductImageForm").dropzone({url: "/path/to/upload_product_image.php"});
  </code></pre>
  
  <hr>
  
  <pre><code>.
  .
  .
  .
  
  var formData = {
    (input values here)
  };
  
  $.ajax({
      type: 'POST', 
      url: 'path/to/projectsAction.php',
      data: formData,
      encode: true
  })
          .done(function(data) {
              var value3 = data.replace(/(\r\n|\n|\r)/gm, "");
              $('#project_productId').append('&lt;option value="' + value3 + '" selected="selected"&gt;' + formData.product_name + '&lt;/option&gt;');
              $("#addProductForm").find("input[type=text], textarea, select").val("");
              $("#addProductImageForm").html("");// THIS IS THE LINE THAT REMOVES THE THUMBNAIL. (From the answer given by xrcwrn)
              $('.close').click();
          });
  
  event.preventDefault();
  </code></pre>