title: Twitter Bootstrap Progress bar animation with FileUploader and Jquery
body: <p>I was following this <a href="http://wsnippets.com/fancy-profile-image-upload-crop-jquery-ajax-php/" rel="nofollow">article</a>
  and I got everything working perfectly well, the image is uploading via the ajax call and everything is ok, I also made some minor changes to the script and it's all working fine with the modal box I set it up with. The thing now is that I want to add twitter bootstrap progress bar to the modal, so that once the image is being uploaded, the progress bar will indicate the progress until the upload is made finally.</p>
  
  <p>I have tried some example on here and from google search and it isn't working (am not too good at Jquery). Here is my code so far, </p>
  
  <p>upload-modal.php</p>
  
  <pre><code>    &lt;div id="userAvatarUploadModal" class="modal hide fade" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true"&gt;
      &lt;div class="modal-dialog"&gt;
          &lt;div class="modal-content"&gt;
  
              &lt;div class="modal-header subheading-grad"&gt;
                  &lt;a class="close_btn darkgreen" data-dismiss="modal"&gt;&lt;i class="fa fa-times"&gt;&lt;/i&gt;&lt;/a&gt;
                  &lt;h4 class="modal-title"&gt;&lt;?php echo $user-&gt;name; ?&gt; | Upload Avatar&lt;/h4&gt;
              &lt;/div&gt;
              &lt;div class="modal-body" align="center"&gt;
                &lt;div class="jumbotron"&gt;
                  &lt;h2&gt;Profile Picture Upload Box&lt;/h2&gt;
                  Click On the Button To Select The Image Or Drag n Drop Your Image On The Button To Upload
                  &lt;hr&gt;
                  &lt;div id="upload_result"&gt;&lt;/div&gt;
  
                  &lt;div class="row-fluid"&gt;
                      &lt;div class="profile_avatar"&gt;
                        &lt;img src="&lt;?php echo $users_util-&gt;get_avatar($user-&gt;avatar, $session-&gt;userdata('user_id')); ?&gt;" class="img-rounded"&gt;
                        &lt;img src="" class="thumbnails img-rounded" /&gt;
                      &lt;/div&gt;
                      &lt;div class="" id="crop-section" style="display:none"&gt;
                        &lt;img src="" id="thumbnail" class="main_image_" alt="Create Thumbnail" /&gt;
                        &lt;p&gt;Crop The Uploaded Image And Save&lt;/p&gt;
                    &lt;div class="save_btn_area"&gt;
                          &lt;input type="hidden" name="filename" value="" id="filename" /&gt;
                          &lt;input type="hidden" name="x1" value="" id="x1" /&gt;
                          &lt;input type="hidden" name="y1" value="" id="y1" /&gt;
                          &lt;input type="hidden" name="x2" value="" id="x2" /&gt;
                          &lt;input type="hidden" name="y2" value="" id="y2" /&gt;
                          &lt;input type="hidden" name="w" value="" id="w" /&gt;
                          &lt;input type="hidden" name="h" value="" id="h" /&gt;&lt;br&gt;
  
                          &lt;input type="submit" class="btn btn-primary button" name="upload_thumbnail" value="Save Avatar" id="save_thumb" /&gt;
                      &lt;/div&gt;
  
                   &lt;!--  &lt;div id="thumb_preview_holder" class="col-lg-6"&gt;         
                          &lt;img src=""  alt="Thumbnail Preview" id="thumb_preview" /&gt;
                    &lt;/div&gt;
                    --&gt;
                      &lt;/div&gt;
                      &lt;div class="progress progress-striped active"&gt;
                        &lt;div class="bar" style="width: 0%;"&gt;&lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="col-lg-6" id="uploader-section"&gt;
                       &lt;!--  &lt;div class="product_image"&gt; 
                        &lt;img src="" class="thumbnails" /&gt;
                      &lt;/div&gt; --&gt;
                      &lt;div id="file-uploader"&gt;
                       &lt;br/&gt;
                      &lt;button id="upload" class="btn btn-success"&gt;
                      &lt;span class="fa fa-picture-o"&gt;&lt;/span&gt;&amp;nbsp;&lt;span class="fa fa-plus fa-plus"&gt;&lt;/span&gt;                        
                     &lt;span class="upload"&gt;Change Your Avatar&lt;/span&gt;&lt;/button&gt;
                      &lt;noscript&gt;      
                          &lt;?php// if($user_agent-&gt;is_mobile() &amp;&amp; !$mobile-&gt;isTablet()){ ?&gt;
                          &lt;p&gt;Please enable JavaScript to use file uploader.&lt;/p&gt;
                          Try &lt;?php //echo anchor('upload_avatar?alt=mobile', 'Alternate'); ?&gt; Uploader
                          &lt;?php //} ?&gt;
                          &lt;!-- or put I could put an upload form here --&gt;
                      &lt;/noscript&gt; 
                    &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                &lt;/div&gt;
              &lt;/div&gt;
  
              &lt;div class="modal-footer"&gt;
                &lt;div class="pull-left" style="padding: 6px 1px 0px 5px;"&gt;
                           Slow Connection?
                          Try &lt;a href="&lt;?php  $uri-&gt;path = array('upload_avatar?alt=mobile'); echo $uri; ?&gt;"&gt;Alternate&lt;/a&gt; Uploader
                &lt;/div&gt;
                    &lt;div class="btn-group"&gt;
                    &lt;button class="btn btn-danger" data-dismiss="modal"&gt;Close&lt;/button&gt;                    
                &lt;/div&gt;
              &lt;/div&gt;
  
          &lt;/div&gt;&lt;!-- /.modal-content --&gt;
      &lt;/div&gt;&lt;!-- /.modal-dalog --&gt;
  &lt;/div&gt;&lt;!-- /.modal --&gt;
  </code></pre>
  
  <p>upload_script.js</p>
  
  <p>I took out the createUploader function cus it's the one that handles the upload proper, others do the cropping and saving back functionalities.</p>
  
  <pre><code>    function createUploader(){ 
      var button = $('#upload');           
      var uploader = new qq.FileUploaderBasic({
          button: document.getElementById('file-uploader'),
          action: 'upload_avatar',
          allowedExtensions: ['jpg', 'gif', 'png', 'jpeg'],
          onSubmit: function(id, fileName) {
              $("#upload_result .alert").slideToggle('slow'); //toggle alert div
              $(".profile_avatar").removeClass(this).hide(); //hide profile avatar div
              // change button text, when user selects file           
              button.text('Uploading');
              // Uploding -&gt; Uploading. -&gt; Uploading...
              interval = window.setInterval(function(){
                  var text = button.text();
                  if (text.length &lt; 13){
                      button.text(text + '.');                    
                  } else {
                      button.text('Uploading');               
                  }
  
              }, 200);
                  //updateProgress() Do something like a function that will animate the progress bar as the image is being upload ;
          },
          showMessage: function(message){
          $("#upload_result").html(returnHtml('alert-error', message)).slideDown('normal');
          },
          onComplete: function(id, fileName, responseJSON){
              button.text('Change Avatar');
              window.clearInterval(interval);
  
              $("#upload_result").html(returnHtml('alert-success', responseJSON.message)).slideDown('normal');
  
              if(responseJSON.success)
              {   //alert(responseJSON['filename']);
                  load_original(responseJSON['filename']);
                  }},
              debug: true
          });           
  }
  </code></pre>
  
  <p>Then this is my controller method for handling the upload over server-side</p>
  
  <p>userController.php/upload_avatar</p>
  
  <pre><code>    public function upload_avatar(){
  
          $allowedExtensions = array('jpg', 'gif', 'png', 'jpeg');
          // max file size in bytes
          $sizeLimit = 2 * 1024 * 1024;
  
          $uploader = new lib\qqFileUploader($allowedExtensions, $sizeLimit);
          $result = $uploader-&gt;handleUpload($this-&gt;images_folder.'/');
  
      if($this-&gt;serverinput-&gt;is_ajax_request()){   // if this request came through ajax
          // to pass data through iframe you will need to encode all html tags
          echo  htmlspecialchars(json_encode(array('success'=&gt;true, 'message' =&gt;'Picture Uploaded. Crop And Save To Complete The Process', 'filename'=&gt; $uploader-&gt;filename)), ENT_NOQUOTES);
          exit;
      }else{
              //$this-&gt;flashmsg-&gt;add('s', 'Avatar Was Successfully Uploaded', $this-&gt;currentUrl());
      }
  }
  </code></pre>
  
  <p>All in all, the image uploads, everything works fine, all I want is to make the progress bar work and animate as the image is being sent over and uploaded.
  So I added everything that might be needed.
  Thanks in advance.</p>