Im trying to build a webform to upload files to my s3 bucket via the AWS lamda and the apigateway services. The upload is working fine and I need a progress bar to be added to the form to show the user the status and progress of their upload.
The methodology uses Ajax and a post request.
The script I have written that tries to use a progress bar is shown below:
$(document).ready(function() {
$("#ObjectUploadBtnId").click(function() {
/*===============================================================*/
/*===============================================================*/
/* Copy and paste these next 23 lines for each file you need to upload */
$.ajax({
url: 'https://zbnr38m2rg.execute-api.eu-west-2.amazonaws.com/presignedurl',
type: 'POST',
contentType: "application/json; charset=utf-8",
data: JSON.stringify({
"BucketName": "BucketNAME",
"methodType": "POST",
"FileName": $('#FileNameId').val()
}, ),
dataType: "json",
xhr: function() {
var xhr = new window.XMLHttpRequest();
xhr.upload.onprogress = function(e) {
if (e.lengthComputable) {
console.log(e.loaded, e.total)
var percentComplete = e.loaded / e.total;
console.log(percentComplete);
$('#status').html('<b> Uploading -> ' + (Math.round(percentComplete * 100)) + '% </b>');
}
}
return xhr;
},
//beforeSend: function(){ $( '#loader' ).show();},
success: function(res) {
uploadFile(res, res.url);
},
error: function(e) {
$("#urlTextId").html("Failed: Unable to Get Signed Upload Url" + e.responseText);
$("#SignedUrlId").html("");
$("#div-obj-holderId").show();
},
complete: function() {
$('#loader').hide();
}
});
/*===============================================================*/
/*===============================================================*/
});
});
The problem
The progress bar is going straight to 100% even for very large files. I have tried to diagnose the problem further and it seems as though the variables e.loaded e.total are equivalent to each other right at the start of the upload. Secondly, the values are not consistent with the actual size of the file I am trying to upload.
Can anyone point me in the right direction of the problem and how to solve this? Thanks
