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($response, JSON_PRETTY_PRINT | JSON_UNESCAPED_UNICODE | JSON_UNESCAPED_SLASHES))->_display();
exit();
}
How can I set the uploading progress in my bar ?
