how to add a progress bar on uploading a file

Question

i am transferring file to a url, i could do it successfully but i dont know how to get the progress of the file that is been uploaded, i need to get 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 dont know how to use could some one give me some examples

Updated After going through the doc 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 run i could not see any of those console i added this new code below the file transfer code. could some one help me

There is an example in the docs which uses the onprogress method — Michael Doye
– Michael Doye, Commented Mar 14, 2017 at 13:27
could u tell me how it works and where to place it in the above code @Und3rTow — Yokesh Varadhan
– Yokesh Varadhan, Commented Mar 15, 2017 at 3:28

Vishnu Kumar Soni · Accepted Answer · 2017-04-10 12:53:47Z

3

You can show progressBar by using onProgress function like this

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 upload() function to upload a file

answered Apr 10, 2017 at 12:53

Vishnu Kumar Soni

2693 silver badges6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

how to add a progress bar on uploading a file

1 Answer 1

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related