title: Dropzone.js - Success message after Upload
body: <p>I am using Dropzone.js for my file uploading process. I already found a few topics here on stackoverflow regarding my problem but none of those solutions help me.</p>
  
  <p>Right now a user can upload multiple files at once at as soon as one file is uploaded, there is a link called "Remove File". That´s all! What I want is the following:</p>
  
  <p>If a user uploads let´s say 4 images than after all those images are uploaded there should be a success message. Right now a user does not understand if those files are uploaded for 100%. I am not good at jQuery/Ajax so I really do not know what my code should look like. Would be great if someone can tell me what my code should look like so that it works.</p>
  
  <p>Here is my form:</p>
  
  <pre><code>    print "&lt;div class='col-sm-12'&gt;&lt;br /&gt;&lt;br /&gt;";
      print "&lt;form method='post' action='index.php' id='dropzone' class='form-horizontal dropzone'&gt;";
      print "&lt;input type='hidden' name='func' value='supportticket'&gt;";
      print "&lt;input type='hidden' name='id' value='".$id."'&gt;";
      print "&lt;input type='hidden' name='sid' value='".$sid."'&gt;";
      print "&lt;input type='hidden' name='attach_images' value='".$attach_images."'&gt;";
      print "&lt;div class='form-group'&gt;";
      print "&lt;div class='col-sm-8'&gt;";
      print "&lt;div class='fallback'&gt;";
      print "&lt;input name='file' type='file' multiple='' /&gt;";
      print "&lt;/div&gt;";
      print "&lt;/div&gt;";
      print "&lt;/div&gt;";
      print "&lt;/form&gt;";
      print "&lt;/div&gt;";
  </code></pre>
  
  <p>Here is my script:</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          jQuery(function($){
  
          try {
            Dropzone.autoDiscover = false;
            var myDropzone = new Dropzone("#dropzone" , {
              paramName: "file", // The name that will be used to transfer the file
              maxFilesize: 2.0, // MB
  
              addRemoveLinks : true,
              dictDefaultMessage :
              '&lt;span class="bigger-150 bolder"&gt;&lt;i class="ace-icon fa fa-caret-right red"&gt;&lt;/i&gt; Drop files&lt;/span&gt; to upload \
              &lt;span class="smaller-80 grey"&gt;(or click)&lt;/span&gt; &lt;br /&gt; \
              &lt;i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"&gt;&lt;/i&gt;',
              dictResponseError: 'Error while uploading file!',
  
              //change the previewTemplate to use Bootstrap progress bars
              previewTemplate: "&lt;div class=\"col-sm-4\"&gt;&lt;div class=\"dz-preview dz-file-preview\"&gt;\n  &lt;div class=\"dz-details\"&gt;\n    &lt;div class=\"dz-filename\"&gt;&lt;span data-dz-name&gt;&lt;/span&gt;&lt;/div&gt;\n    &lt;div class=\"dz-size\" data-dz-size&gt;&lt;/div&gt;\n    &lt;img data-dz-thumbnail /&gt;\n  &lt;/div&gt;\n  &lt;div class=\"progress progress-small progress-striped active\"&gt;&lt;div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;\n&lt;/div&gt;\n  &lt;div class=\"dz-error-message\"&gt;&lt;span data-dz-errormessage&gt;&lt;/span&gt;&lt;/div&gt;\n&lt;/div&gt;&lt;/div&gt;"
            });
  
  
  
             $(document).one('ajaxloadstart.page', function(e) {
                  try {
                      myDropzone.destroy();
                  } catch(e) {}
             });
  
          } catch(e) {
            alert('Dropzone.js does not support older browsers!');
          }
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>NOTICE: Upload is working fine currently! All images are uploaded to my server and I also wrote a script so that the name of my file will be saved inside my database. The only thing I need is to extend my script so that I get a success message if an upload was successfull.</p>
  
  <p>Hope that someone can help me out!</p>
  
  <p>EDIT:
  Here is my current code. Upload is still working fine, but no success message after all files are uploaded.</p>
  
  <pre><code>    &lt;script type="text/javascript"&gt;
          jQuery(function($){
  
          try {
            Dropzone.autoDiscover = false;
            var errors = false;
            var myDropzone = new Dropzone("#dropzone" , {
              paramName: "file", // The name that will be used to transfer the file
              maxFilesize: 2.0, // MB
  
              error: function(file, errorMessage) {
              errors = true;
              },
              queuecomplete: function() {
              if(errors) alert("There were errors!");
              else alert("We're done!");
              },
  
              addRemoveLinks : true,
              dictDefaultMessage :
              '&lt;span class="bigger-150 bolder"&gt;&lt;i class="ace-icon fa fa-caret-right red"&gt;&lt;/i&gt; Drop files&lt;/span&gt; to upload \
              &lt;span class="smaller-80 grey"&gt;(or click)&lt;/span&gt; &lt;br /&gt; \
              &lt;i class="upload-icon ace-icon fa fa-cloud-upload blue fa-3x"&gt;&lt;/i&gt;',
              dictResponseError: 'Error while uploading file!',
  
              //change the previewTemplate to use Bootstrap progress bars
              previewTemplate: "&lt;div class=\"col-sm-4\"&gt;&lt;div class=\"dz-preview dz-file-preview\"&gt;\n  &lt;div class=\"dz-details\"&gt;\n    &lt;div class=\"dz-filename\"&gt;&lt;span data-dz-name&gt;&lt;/span&gt;&lt;/div&gt;\n    &lt;div class=\"dz-size\" data-dz-size&gt;&lt;/div&gt;\n    &lt;img data-dz-thumbnail /&gt;\n  &lt;/div&gt;\n  &lt;div class=\"progress progress-small progress-striped active\"&gt;&lt;div class=\"progress-bar progress-bar-success\" data-dz-uploadprogress&gt;&lt;br /&gt;&lt;/div&gt;&lt;/div&gt;\n&lt;/div&gt;\n  &lt;div class=\"dz-error-message\"&gt;&lt;span data-dz-errormessage&gt;&lt;/span&gt;&lt;/div&gt;\n&lt;span data-dz-suc&gt;successfull&lt;/span&gt;&lt;/div&gt;&lt;/div&gt;"
            });
  
             $(document).one('ajaxloadstart.page', function(e) {
                  try {
                      myDropzone.destroy();
                  } catch(e) {}
             });
  
  
          } catch(e) {
            alert('Dropzone.js does not support older browsers!');
          }
  
          });
      &lt;/script&gt;
  </code></pre>
  
  <p>Thanks,
  Chris</p>