CodeIgniter Upload Progress

Question

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).

Here's what I'm looking for:

• PHP/jQuery/AJAX/Javascript solution (no Flash, please!)
• Cross-Browser (IE isn't an issue, so if it doesn't work in IE8 or lower that's fine)
• CodeIgniter Upload Library-compatible

That's about it. My code for reference:

PHP:

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->load->library('upload', $config);

    if (!$this->upload->do_upload('userfile'))
    {
        $this->session->set_flashdata('error', $this->upload->display_errors('', ''));

        redirect('upload');
    }
    else
    {
        $this->session->set_flashdata('upload_data', $this->upload->data());

        $upload_data = $this->upload->data();
        $uploader = $this->flexi_auth->get_user_by_id()->row_array()['uacc_username'];

        $this->load->model('upload_model');
        $this->session->set_flashdata('uaid', $this->upload_model->generate_uaid($upload_data['raw_name']));
        $this->upload_model->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');
    }
}

HTML:

<div class="progress progress-striped active" id="upload_progress" style="display: none;">
                    <div class="bar" id="upload_progress_bar" style="width: 0%;"></div>
                </div>
                <?php echo form_open_multipart('upload/do_upload', array('id' => 'upload_form')); ?>
                <input type="file" name="userfile" size="20" />
                <button type="submit" name="upload">Upload</button>
                <?php echo form_close(); ?>

Answer 1

Actually, after doing some further research, it seems that Dropzone.JS works really well with CI, with very little configuration and tweaking. I haven't had the chance to use all of its features yet, but after just about 5 minutes of work it's got upload progress AND drag 'n' drop uploading working just fine.

Answer 2

http://vortexdev.netii.net/article_20/Integrate_jQuery_File_Upload_with_CodeIgniter
- 2012/05/14

https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-6.5-with-CodeIgniter-2.1
- edited 5 months ago

It's a tough one. There are many solutions, but a lot depends on the stack and target (e.g. no flash in your case). There is a PECL extension which provide native functionality as well as many examples of others trying to do the same thing that have been active within the last year. Theres also this which claims to offer straight html progress based on PHP's output control. I couldn't get it to work locally though.

Best bet is to start mashing stuff together and try to get something that works - there isn't at the moment a straight plug-n-play solution for CI upload progress bars.