Use a simple html5 progress bar with Ionic and angular for file upload

This post will describe how to integrate a simple html5 progress with Ionic for a file upload functionality with cordova.

First when starting the upload function, show a loading modal:

$ionicLoading.show({
template: ‘Uploading image<br /><progress
max=“100” value=“0” id=“progress_bar_con”> </progress>’
});

Here you can notice that there is a html5 progress tag along with an id. Next is the actual code for the progress of the upload using the cordova upload plugin:

var ft = new FileTransfer();

ft.onprogress = function(progressEvent)
{
if(progressEvent.lengthComputable)
{
uploadProgress = parseInt(progressEvent.loaded / progressEvent.total *     100);

document.getElementById(“progress_bar_con”).value = uploadProgress;

}

else

{

document.getElementById(“progress_bar_con”).value =   document.getElementById(“progress_bar_con”).value + 1;
}

console.log(“progressing”);//debug
};

This should do the trick for a simple progress bar in Ionic loading modal which will be updated in real time as the file is being uploaded.

Facebook Comments

Oct, 10, 2016

  HTML5

0

SHARE THIS