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(); ?>

Have a look at this jQuery plugin, maybe you can use that or take out parts to use in you project with regards to the progress bar: http://pixelcone.com/fileuploader/ — Mark Cameron, Apr 11 '13 at 08:04

score 3 · Accepted Answer · answered Apr 13 '13 at 12:45

3

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.

answered Apr 13 '13 at 12:45

troytc

662
1
7
28

Dropzone.js is working very nice and has nice tutorial. Now will You please help me to for the remove option of image which is in http://www.dropzonejs.com/ – Ripa Saha Jul 05 '13 at 08:16

score 1 · Answer 2 · edited May 23 '17 at 12:16

1

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.

edited May 23 '17 at 12:16

Community

1
1

answered Apr 11 '13 at 14:09

stormdrain

7,915
4
37
76

I didn't figure there would be a straight solution. I'll play with the solutions you suggested as well as check out jQuery File Upload. Could jQuery File Upload be modified to display some custom data after the upload finishes? My site allows video uploads and we display the URL of the video when it finishes uploading. – troytc Apr 11 '13 at 22:59
I've never used it, but it *has to*. That's a pretty basic requirement. I actually looked at https://github.com/blueimp/jQuery-File-Upload/wiki/jQuery-File-Upload-6.5-with-CodeIgniter-2.1 again, and it is really complete. That page has everything you need; try it out and if you're having trouble getting the URL to display, open another question. – stormdrain Apr 12 '13 at 13:11

CodeIgniter Upload Progress

2 Answers2