title: Progress bar when upload file in contact form 7 in wordpress error
body: <p>I found this fantastic piece of code for enabling progress bar during uploading files in Contact Form 7 plugin for Wordpress. Original source: <a href="https://stackoverflow.com/questions/44604990/progress-bar-show-when-upload-file-in-contact-form-7-in-wordpress">HERE</a></p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>&lt;script type="text/javascript"&gt;
          jQuery(document).ready(function(){  
      var dropbox;  
  
      dropbox = document.getElementById("dropbox");  
      dropbox.addEventListener("dragenter", dragenter, false);  
      dropbox.addEventListener("dragleave", dragleave, false);  
      dropbox.addEventListener("dragover", dragover, false);  
      dropbox.addEventListener("drop", drop, false);  
  
      function defaults(e){
         e.stopPropagation();  
         e.preventDefault();  
      }
      function dragenter(e) {  
         jQuery(this).addClass("active");
         defaults(e);
      }  
  
      function dragover(e) { 
         defaults(e);
      }  
      function dragleave(e) {  
         jQuery(this).removeClass("active");
         defaults(e);
      }  
  
      function drop(e) {  
         jQuery(this).removeClass("active");
         defaults(e);
         var dt = e.dataTransfer;  
         var files = dt.files;  
  
         handleFiles(files,e);  
      }  
     jQuery(document).on('change', '#fileElem', function(){
      handleFiles(this.files)});
      handleFiles = function (files,e){
  
          var imageType = /image.*/;  
          var file = files[0];
  
          var info = '&lt;div class="preview active-win"&gt;&lt;div class="preview-image"&gt;&lt;img &gt;&lt;/div&gt;&lt;div class="progress-holder"&gt;&lt;span id="progress"&gt;&lt;/span&gt;&lt;/div&gt;&lt;span class="percents"&gt;&lt;/span&gt;&lt;div style="float:left;"&gt;Uploaded &lt;span class="up-done"&gt;&lt;/span&gt; KB of '+parseInt(file.size / 1024)+' KB&lt;/div&gt;';
  
          jQuery(".upload-progress").show("fast",function(){
              jQuery(".upload-progress").html(info); 
              uploadFile(file);
          });
  
    }
  
    uploadFile = function(file){
      // check if browser supports file reader object 
      if (typeof FileReader !== "undefined"){
      //alert("uploading "+file.name);  
      reader = new FileReader();
      reader.onload = function(e){
          //alert(e.target.result);
          jQuery('.preview img').attr('src',e.target.result).css("width","70px").css("height","70px");
      }
      reader.readAsDataURL(file);
  
      xhr = new XMLHttpRequest();
      xhr.open("post", "ajax_fileupload.php", true);
  
      xhr.upload.addEventListener("progress", function (event) {
          console.log(event);
          if (event.lengthComputable) {
              jQuery("#progress").css("width",(event.loaded / event.total) * 100 + "%");
              jQuery(".percents").html(" "+((event.loaded / event.total) * 100).toFixed() + "%");
              jQuery(".up-done").html((parseInt(event.loaded / 1024)).toFixed(0));
          }
          else {
              alert("Failed to compute file upload length");
          }
      }, false);
  
      xhr.onreadystatechange = function (oEvent) {  
        if (xhr.readyState === 4) {  
          if (xhr.status === 200) {  
            jQuery("#progress").css("width","100%");
            jQuery(".percents").html("100%");
            jQuery(".up-done").html((parseInt(file.size / 1024)).toFixed(0));
             jQuery(".upload-progress").hide();
          } else {  
            alert("Error"+ xhr.statusText);  
          }  
        }  
      };  
  
      // Set headers
      xhr.setRequestHeader("Content-Type", "multipart/form-data");
      xhr.setRequestHeader("X-File-Name", file.fileName);
      xhr.setRequestHeader("X-File-Size", file.fileSize);
      xhr.setRequestHeader("X-File-Type", file.type);
      xhr.send(file);
  
      }else{
          alert("Your browser doesnt support FileReader object");
      }       
      }
      });
      &lt;/script&gt;</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>&lt;style&gt;
  .active{ background : #B4F9AC; font-size: 15px; box-shadow : 0px 0px 5px 6px #ccc; }
  .progress-holder{ width: 300px; padding: 2px; background: #CCCCCC; border-radius: 3px; float: left; margin-top: 4px; margin-right: 5px; }
  #progress{ height: 6px; display:block; width: 0%; border-radius: 2px; background: -moz-linear-gradient(center top , #13DD13 20%, #209340 80%) repeat scroll 0 0 transparent; /* IE hack */  background: -ms-linear-gradient(bottom, #13DD13, #209340); /* chrome hack */  background-image: -webkit-gradient(linear, 20% 20%, 20% 100%, from(#13DD13), to(#209340)); /* safari hack */  background-image: -webkit-linear-gradient(top, #13DD13, #209340); /* opera hack */  background-image: -o-linear-gradient(#13DD13,#209340); box-shadow:3px 3px 3px #888888; }
  .preview{ border: 1px solid #CDCDCD; width: 450px; padding: 10px; height:auto;  overflow: auto; color: #4D4D4D; float: left; box-shadow:3px 3px 3px #888888; border-radius: 2px; }
  .percents{ float: right; }
  .preview-image{ box-shadow: 3px 3px 3px #888888; width: 70px; height: 70px; float: left; margin-right: 10px; }
  .file-info{ height: 50px; float: left; width: auto; margin-bottom: 10px; border: 1px solid blue; }
  .file-info span{ margin: 3px 2px; font-size: 12px; float:left; display: block; min-width: 100px; overflow: auto; border: 1px solid red; overflow: none; }
  .upload-progress{ display: none; }&lt;/style&gt;</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="dropbox"&gt;[file* fileElem id:fileElem limit:5000000]&lt;/div&gt;&lt;div class="upload-progress"&gt;&lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>It is working for me however, i have contact form with 5 files to upload and when I'm uploading one progress bar and thumbnail are shown for all of them. See screnshot <a href="http://prntscr.com/gcmp43" rel="nofollow noreferrer">HERE</a>.</p>
  
  <p>I'm not really programer nor developer so I don't have enough knowledge to "fix it" myself. I was trying to give uniqe ID for every file in CF7 form, but no luck.</p>
  
  <p>Original topic is closed so I can't contact developer with my issue. Can anybody take a look into code and give some clues?</p>
  
  <p>Thank you in advance</p>