Progress Bar for file uploads to PHP using AJAX and Bootstrap - php

Question

I have a form with which I upload images using AJAX to a PHP Script
This is my form
<form action ="upload.php" method = "POST" enctype = "multipart/form-data" class = "form-horizontal" name="formData" id="data">
<!--File Upload-->
<div class = "form-group">
<label class="control-label col-sm-1" for = "file">File:</label>
<div class="col-sm-9">
<input type = "file" name = "image_file" id = "image_file" class = "form-control" accept="image/*" onChange="autoPull(this.value)";>
</div>
</div>
<div class = "form-group">
<label class="control-label col-sm-1" for = "project_name">ProjectName:</label>
<div class="col-sm-9">
<input type = "text" name ="project_name" id = "project_name" class = "form-control" placeholder="Enter Project Name" value = "" required>
</div>
</div>
<div class = "button">
<div class="form-group">
<div class="col-sm-offset-1 col-sm-6">
<input type="submit" name = "submit" class="btn btn-primary" value = "Submit" id="file_upload">
<input type="reset" name = "submit" class="btn btn-default" value = "Reset">
</div>
</div>
</div>
</form>
<br/>
<div class="progress" style="display:none;">
<div class="progress-bar" role="progressbar" aria-valuenow="0" aria-valuemin="0" aria-valuemax="100" style="width:0%;">
</div>
</div>
<div id = "result"></div>
The result div is where the output from PHP is displayed(see in AJAX)
Progress bar is where I wish to see my bootstrap progress bar.
and this is my AJAX
$(function () {
$('form#data').submit(function (e){
e.preventDefault();
e.stopImmediatePropagation();
var formData = new FormData($(this)[0]);
var file = $('input[type=file]')[0].files[0];
formData.append('upload_file',file);
$('.progress').show();
$.ajax({
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.addEventListener("progress", function(evt) {
if (evt.lengthComputable) {
var percentComplete = evt.loaded / evt.total;
percentComplete = parseInt(percentComplete * 100);
$('.progress-bar').css('width',percentComplete+"%");
$('.progress-bar').html(percentComplete+"%");
if (percentComplete === 100) {
}
}
}, false);
return xhr;
},
type:'POST',
url: 'upload.php',
data: formData,
async:false,
cache:false,
contentType: false,
processData: false,
success: function (returndata) {
$('#result').html(returndata);
}
});
return false;
});
});
Now I get an output which shows me the data echoed in the PHP. But for some reason I cant get the progress bar to work.
What could be the issue?

Answer 1

This should do it
var progress_bar = $(".progress-bar");
progress_bar.html("0%");
progress_bar.css("width", 0);
$(".progress").hide();

Answer 2

removing
async : false;
solved it. But I need to see how to reset the bar now.