Welcome Guest, Not a member yet? Register   Sign In
Ajax Upload with progress bar (Bootstrap)

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:
// 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 style="max-width: 200px; max-height: 150px; line-height: 6px;" class="fileinput-preview fileinput-exists thumbnail"></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" />
                                    <a data-dismiss="fileinput" class="btn btn-orange fileinput-exists" href="#">Remove</a>
                <?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
// send data to upload the file
        $('#btn-upload').on('click', function (event) {

           var form = $('.upload-form')[0];
           var formData = new FormData(form);
                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-results').addClass('alert alert-success').html(response.message);

                    if (response.status == 400) {
                        $('#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() {


// 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',


// 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>',

set_output(json_encode($responseJSON_PRETTY_PRINT JSON_UNESCAPED_UNICODE JSON_UNESCAPED_SLASHES))->_display();

How can I set the uploading progress in my bar ?

Messages In This Thread
Ajax Upload with progress bar (Bootstrap) - by Lykos22 - 09-29-2015, 03:56 AM

Theme © iAndrew 2016 - Forum software by © MyBB