title: CodeIgniter Upload Progress
body: <p>I'm trying to make a file upload with a progress bar, using CI 2.1.3.  I've got the file upload all working correctly, but getting this file progress thing has not been easy.  I've looked at a ton of guides all with different solutions, but none of them seem to work because most are quite dated (2008-ish).</p>
  
  <p>Here's what I'm looking for:</p>
  
  <ul>
  <li>PHP/jQuery/AJAX/Javascript solution (no Flash, please!)</li>
  <li>Cross-Browser (IE isn't an issue, so if it doesn't work in IE8 or lower that's fine)</li>
  <li>CodeIgniter Upload Library-compatible</li>
  </ul>
  
  <p>That's about it.  My code for reference:</p>
  
  <p>PHP:</p>
  
  <pre><code>public function do_upload()
  {
      // Configure and load the uploads library
      $config['upload_path']   = './uploads/';
      $config['allowed_types'] = 'mp4|mov';
      $config['encrypt_name']  = TRUE;
      $config['max_size']      = '2621440'; // 2.5 GB, in kilobytes
  
      $this-&gt;load-&gt;library('upload', $config);
  
      if (!$this-&gt;upload-&gt;do_upload('userfile'))
      {
          $this-&gt;session-&gt;set_flashdata('error', $this-&gt;upload-&gt;display_errors('', ''));
  
          redirect('upload');
      }
      else
      {
          $this-&gt;session-&gt;set_flashdata('upload_data', $this-&gt;upload-&gt;data());
  
          $upload_data = $this-&gt;upload-&gt;data();
          $uploader = $this-&gt;flexi_auth-&gt;get_user_by_id()-&gt;row_array()['uacc_username'];
  
          $this-&gt;load-&gt;model('upload_model');
          $this-&gt;session-&gt;set_flashdata('uaid', $this-&gt;upload_model-&gt;generate_uaid($upload_data['raw_name']));
          $this-&gt;upload_model-&gt;create_upload($upload_data['file_name'], $upload_data['raw_name'], $upload_data['client_name'], $upload_data['file_size'], $upload_data['file_path'], $uploader);
  
          redirect('upload');
      }
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;div class="progress progress-striped active" id="upload_progress" style="display: none;"&gt;
                      &lt;div class="bar" id="upload_progress_bar" style="width: 0%;"&gt;&lt;/div&gt;
                  &lt;/div&gt;
                  &lt;?php echo form_open_multipart('upload/do_upload', array('id' =&gt; 'upload_form')); ?&gt;
                  &lt;input type="file" name="userfile" size="20" /&gt;
                  &lt;button type="submit" name="upload"&gt;Upload&lt;/button&gt;
                  &lt;?php echo form_close(); ?&gt;
  </code></pre>