title: Uploading a file from a web app with dropzone.js
body: <p>I am building a web app. I have to let a user upload a picture or drag-and-drop one into the browser. To help with this, I'm using <a href="http://www.dropzonejs.com/" rel="nofollow">dropzone.js</a>. My challenge is, I need to customize the appearance a bit. </p>
  
  <p>My customization requires features that seem pretty forward in dropzone.js. Basically, I need: only one file can be uploaded at once. While the file is being uploaded, I need to show a progress bar. Once uploaded, I need to let the user either a) remove the existing picture or b) replace the picture with another one. In an attempt to this, I currently have the following HTML: </p>
  
  <pre><code>&lt;div id="myDropZone" style="cursor:pointer;"&gt;
    &lt;div class="files" id="previews"&gt;
      &lt;div id="template" class="file-row"&gt;
        &lt;ul class="list-inline"&gt;
          &lt;li&gt;
            &lt;span class="preview" style="width:300px;"&gt;&lt;img data-dz-thumbnail /&gt;&lt;/span&gt;
            &lt;p class="size" data-dz-size&gt;&lt;/p&gt;
          &lt;/li&gt;
          &lt;li style="vertical-align:top;"&gt;
            &lt;ul id="pictureActions" class="list-unstyled"&gt;
              &lt;li&gt;
                &lt;button class="btn btn-default dz-clickable file-input-button"&gt;
                  &lt;i class="glyphicon glyphicon-picture"&gt;&lt;/i&gt;
                  &lt;span&gt;Pick...&lt;/span&gt;
                &lt;/button&gt;
              &lt;/li&gt;
              &lt;li&gt;
                &lt;button data-dz-remove class="btn btn-danger btn-block" style="margin-top:8px;"&gt;
                  &lt;i class="glyphicon glyphicon-trash pull-left"&gt;&lt;/i&gt;
                  &lt;span&gt;Delete&lt;/span&gt;
                &lt;/button&gt;
              &lt;/li&gt;
            &lt;/ul&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
  
        &lt;div id="uploadProgress" class="progress" role="progressbar" aria-valuemin="0" aria-valuemax="100" aria-valuenow="0"&gt;
          &lt;div class="progress-bar progress-bar-warning" style="width:0%;" data-dz-uploadprogress&gt;
            &lt;span&gt;Please wait...&lt;/span&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
    &lt;div id="uploadPrompt"&gt;Drag-and-drop a picture here&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>I am initializing this code as a dropzone using the following JavaScript:</p>
  
  <pre><code>$(function () {
      var previewNode = document.querySelector("#template");
      previewNode.id = "";
      var previewTemplate = previewNode.parentNode.innerHTML;
      previewNode.parentNode.removeChild(previewNode);
  
      var pictureDropZone = new Dropzone("div#myDropZone", {
          url: "/pictures/upload",
          clickable: true,
          uploadMultiple: false,
          autoProcessQueue: true,
          previewTemplate: previewTemplate,
          previewsContainer: "#previews",
          init: function () {
              this.on("complete", function (data) {
                  $('#pictureActions').show();
                  $('#uploadProgress').hide();
                  $('#uploadPrompt').hide();
              });
          },
          uploadprogress: function (e, progress) {
            $('#uploadProgress').css('width', progress);
          },
          removedfile: function () {
              $('#previews').hide();
              $('#uploadPrompt').show();
          }
      });
  });
  </code></pre>
  
  <p>There are several problems though. If I click the text <code>Drag-and-drop a picture here</code>, the file picker does not open. If I click outside of the text, the file picker opens. Also, this code works for the initial process of choosing a file. However, if I click the "Pick..." button, the page does a post back. In reality, I was expecting the file picker to appear again. If I click the "Delete" button, and then choose a file again from the file picker, the picture, upload progress and action buttons never appear. </p>
  
  <p>I feel like I'm screwing up the initialization of the dropzone somehow. What am I doing wrong? Why can't I choose another picture or delete a picture and choose another one or open the file picker if I click the prompt text?</p>