Remove dropzone of thumbs and hide the div containing dropzone

I'm using the dropzone.js file uploader. Everything works fine but once I've uploaded I want to clear the dropzone of thumbs and hide the div containing dropzone. That's where things go awry. The thumbs still stay in place despite my efforts to clear them.

I've tried all the suggestions in the Dropzone.js site but nothing seems to work. I can get separate remove buttons to work using their example but can't have a master remove button. And yes, I've tried the FAQ example as well. I took the code straight from the tutorial and just added the references to the libraries and it still wouldn't remove the thumbs.

<!doctype html>
<html>
<head>
<link href="style/dropzone.css?v=1.2" type="text/css" rel="stylesheet" />
<script src="js/dropzone.min.js"></script>
<script language="javascript">
function ClearDZ() {
            myDropzone.removeAllFiles();
            document.getElementById("container").style.display = "none";
  }
</script>
<meta charset="UTF-8">
</head>

<body>
<div id=container>
<form id="myDropzone" action="/target-url" class="dropzone"></form>
<button onclick="ClearDZ()">Clear All</button>
<div>
</body>
</html>

Solution

I wonder where are your dropzone configuration and how did you configure it. If your code is as plain as you showed, you should configure your dropzone and listen to events. Try this:

<script>
//I'm assuming your form is called myDropzone
Dropzone.options.myDropzone = {
  //your configuration goes here

  init: function() {
    var myDropzone = this;

    //You can do this
    $('#your_button_id').on("click", function(e) {
      myDropzone.removeAllFiles(true);
    });

    //But you should do this
    this.on("success", function(file, response) {
      myDropzone.removeAllFiles(true);
    });

    //and this to handle any error
    this.on("error", function(file, response) {
      //handle errors here
    });
  }
}
</script>

You can have more information about listen to events at http://www.dropzonejs.com/#toc_8 and about configuration of Dropzone at http://www.dropzonejs.com/#toc_6

I hope you find it useful :)