How to add a progress bar when downloading a file

Question

I pass the file to url, I could do it successfully, but I don’t know how to get the progress of the downloaded file, I need to make progress in some numbers

fileTransfer.upload(file_path, api_endpoint, options, data) .then((data) => { // success console.log("success", JSON.parse(data['response'])); this.upload_success(); }, (err) => { // error this.failed_upload(); console.log('File failed uploaded.', err); }) 

I found onProgress (Listener) check in ionic2 documentation, I don't know how to use, can someone give me some examples

Updated After going through the document https://github.com/apache/cordova-plugin-file-transfer#example-with-upload-headers-and-progress-events-android-and-ios-only

 fileTransfer.onProgress = function(progressEvent) { if (progressEvent) { console.log("progress success =====") } else { console.log("progress error =====") } }; 

If I started, I could not see any of these consoles, I added this new code under the file transfer code. can someone help me

Answer 1

You can show progressBar using onProgress function like

 public fileTransfer: TransferObject = this.transfer.create(); public upload(path,folder) { url="http://www.axmag.com/download/pdfurl-guide.pdf"; var trustHosts = true; this.presentLoading("Loading"); //**Progress Bar** this.fileTransfer.onProgress((e)=> { let prg=(e.lengthComputable) ? Math.round(e.loaded / e.total * 100) : -1; console.log("progress:"+prg); }); this.fileTransfer.upload(file_path, api_endpoint, options, data).then((entry) => { //handle success console.log('upload complete: ' ); }, (error) => { this.loader.dismiss(); alert('uploading faild: '); console.log(error); //handle error }); } 

Now you can call the upload () function to upload the file