title: Dropzone thumbnail width image size
body: <p>How do I change the thumbnail size of uploaded images? I have tried thumbnailWidth:"350" in my javascript, However that does not increase the thumbnail size, rather the thumbnail just looks zoomed in on. How do I go about manipulating the image thumbnail size?</p>
  
  <p>HTML:</p>
  
  <pre><code>&lt;section id="create"&gt;
  &lt;form action="upload.php" class="dropzone" id="uploadphoto"&gt;&lt;/form&gt;
  &lt;/section&gt;
  </code></pre>
  
  <p>CSS:</p>
  
  <pre><code>.dropzone {
  position: relative;
  border: 10px dotted #FFF;
  border-radius: 20px;
  color: white;
  font: bold 24px/200px arial;
  height: 400px;
  margin: 100px auto;
  text-align: center;
  width: 400px;
  }
  
  .dropzone:hover {
  border: 10px dotted #0C3;
  
  .dropzone.dropped {
  background: #222;
  border: 10px dotted #444;
  }
  
  .dropzone.in {
  width: 600px;
  height: 200px;
  line-height: 200px;
  font-size: larger;
  }
  
  .dropzone img {
  border-radius: 10px;
  vertical-align: middle;
  max-width: 95%;
  max-height: 95%;
  }
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>Dropzone.options.uploadphoto = {
  maxFilesize: 25, //MB
  dictDefaultMessage: "Drag and Drop Posters    or click",
  acceptedFiles: ".jpeg,.jpg,.png,.gif,.JPEG,.JPG,.PNG,.GIF,.pdf,.pub",
  thumbnailWidth:"350",
  accept: function(file, done) {
      console.log("uploaded"); //debuging the upload
      done();
  },
  init: function() {
   this.on("addedfile", function() {
    if (this.files[1]!=null){
      this.removeFile(this.files[0]);
         }
      });
    }
  };
  </code></pre>