CodeIgniter Forums

Full Version: Ajax Upload with progress bar (Bootstrap)
You're currently viewing a stripped down version of our content. View the full version with proper formatting.
I'd like some help please. I'm having a form inside a bootstrap modal in which I upload files by ajax and what I'd like to do is to display the progress of the uploading in a bootstrap progress bar, but I don't know how to do this.

This is my code:
Code:
// This is the view file (upload form in modal window & the progress bar)
<div class="modal-body">

                <div id="upload-results"></div>

                <?php echo form_open_multipart('posts/upload_ajax', array('class' => 'form-horizontal upload-form')); ?>

                    <input type="hidden" name="postID" />

                    <div class="form-group">
                        <label class="col-sm-3 control-label">Image Upload</label>
                        <div class="col-sm-5">
                            <div data-provides="fileinput" class="fileinput fileinput-new">
                                <input type="hidden">
                                <div data-trigger="fileinput" style="width: 200px; height: 150px;" class="fileinput-new thumbnail">
                                    <img src="<?php echo base_url('img/default.jpg'); ?>">
                                </div>
                                <div style="max-width: 200px; max-height: 150px; line-height: 6px;" class="fileinput-preview fileinput-exists thumbnail"></div>
                                <div>
                                    <span class="btn btn-white btn-file">
                                        <span class="fileinput-new">Select image</span>
                                        <span class="fileinput-exists">Change</span>
                                        <input type="file" accept="image/*" name="userfile" />
                                    </span>
                                    <a data-dismiss="fileinput" class="btn btn-orange fileinput-exists" href="#">Remove</a>
                                </div>
                            </div>
                        </div>
                    </div>
                <?php echo form_close(); ?>

<div class="progress">
    <div class="progress-bar" role="progressbar" aria-valuenow="60" aria-valuemin="0" aria-valuemax="100" style="width: 60%;">60%</div>
</div><!-- /.progress -->

</div><!-- /.modal-body -->

This is my ajax script
Code:
// send data to upload the file
        $('#btn-upload').on('click', function (event) {
            event.preventDefault();

           var form = $('.upload-form')[0];
           var formData = new FormData(form);
            $.ajax({
                url : url, // the action from the upload form
                type : 'post',
                data : formData,
                cache: false,
                contentType: false,
                processData: false,
                dataType : 'json',
                success : function(response) {
                    $('#upload-results').removeClass('alert alert-success alert-danger').html('');

                    if (response.status == 200) {
                        $('.upload-form').hide();
                        $('#upload-results').addClass('alert alert-success').html(response.message);
                    }

                    if (response.status == 400) {
                        $('.upload-form').show();
                        $('#upload-results').addClass('alert alert-danger').html(response.message);
                    }
                },
            });
        });

And this is the functionality in the controller just in case is needed

PHP Code:
public function upload_ajax() {

        
$this->output->enable_profiler(false);

        
// check if the article has been created
        
if (!$this->input->post('post_id')) {

            
// do something here ..
        

        else {

            
// set upload configs
            
$dir FCPATH '/posts';

            
$config = array(
                
'upload_path' => $dir,
                
'allowed_types' => 'gif|jpg|png',
                
'max_width' => '1024',
                
'max_height' => '768',
            );

            
$this->load->library('upload'$config);

            
// try to upload the file
            
if (!$this->upload->do_upload('userfile')) {
                
$response = array(
                    
'status' => '400',
                    
'message' => $this->upload->display_errors(),
                );
            } else {
                
$data $this->upload->data();
                
$response = array(
                    
'status' => '200',
                    
'message' => '<p>The image uploaded successfully</p>',
                );
            }
        }

        
$this->output->set_content_type('application/json''utf-8')
        ->
set_output(json_encode($responseJSON_PRETTY_PRINT JSON_UNESCAPED_UNICODE JSON_UNESCAPED_SLASHES))->_display();
        exit();
    } 

How can I set the uploading progress in my bar ?