fixed bug in image upload that was causing multiple form submits, added progress bar to image upload

v1.18.x
Baris Soner Usakli 12 years ago
parent 3b6e20d4ef
commit b18330f246

@ -50,6 +50,10 @@
<input id="userPhotoInput" type="file" name="userPhoto" >
</form>
<div id="upload-progress-box" class="progress progress-striped active hide">
<div id="upload-progress-bar" class="bar" style="width: 0%;"></div>
</div>
<div id="alert-status" class="alert hide"></div>
<div id="alert-success" class="alert alert-success hide"></div>
<div id="alert-error" class="alert alert-error hide"></div>
@ -141,6 +145,9 @@ $(document).ready(function() {
$('#uploadForm').submit(function() {
status('uploading the file ...');
$('#upload-progress-bar').css('width', '0%');
$('#upload-progress-box').show();
if(!$('#userPhotoInput').val()) {
error('select an image to upload!');
return false;
@ -151,6 +158,11 @@ $(document).ready(function() {
error: function(xhr) {
error('Error: ' + xhr.status);
},
uploadProgress : function(event, position, total, percent) {
$('#upload-progress-bar').css('width', percent+'%');
},
success: function(response) {
if(response.error) {
@ -182,6 +194,7 @@ $(document).ready(function() {
$('#alert-status').hide();
$('#alert-success').hide();
$('#alert-error').hide();
$('#upload-progress-box').hide();
}
function status(message) {
@ -310,14 +323,15 @@ $(document).ready(function() {
$('#change-picture-modal').modal('hide');
$('#upload-picture-modal').modal('show');
hideAlerts();
$('#pictureUploadSubmitBtn').on('click', function() {
$('#uploadForm').submit();
});
return false;
});
$('#pictureUploadSubmitBtn').on('click', function() {
$('#uploadForm').submit();
});
});

Loading…
Cancel
Save