I have a question about uploading file via PnP JS SPFx in SharePoint online. I had successfully uploaded files via PnP JS. After that, I need to show uploading percentage.

Same requirement, using REST API I get percentage value using this link Show a progress on multiple file upload Jquery/Ajax

Same approach not working in SP PnP JS. If anyone has an answer then help me. Is there any way to get uploading percentage in SP PnP JS SharePoint online(spfx)?

2 Answers 2


Finally I got the solution for my question. Instead of Using files.add in sp-pnp-js am used addChunked Method. Refer This Link.

Using addChunked method we upload the files as number of little blocks sized 10MB. Using Total number of blocks, add some javascript code to convert percentage.


An interesting approach is to use UI Fabric controls that are more consistent with the SharePoint Online design. There are different progress controls: ProgressIndicators, Shimmer, Spinner. Best suited to your needs is ProgressIndicators, but it does not allow you to display the percentage as it is implemented by default.

Control behaviour in action here. You can read more details about ProgressIndicators control here.


There is a percentage property that can be implemented as shown in the following screenshot:

enter image description here

  • Thanks for your approach. I tried it Before once.As you say this only show loader,shimmer not percentage. Thanks for your answer.
    – Kamesh
    Commented Feb 24, 2020 at 12:09
  • I updated the answer
    – bAbdenour
    Commented Feb 24, 2020 at 13:43
  • If you find my answer useful, kindly upvote and accept it as answer, so that it will help others too.
    – bAbdenour
    Commented Feb 25, 2020 at 9:04
  • Thanks a lot bAbdenour. I find the another solution in sp-pnp-js with some extra javascript code. another one time thanks a lot...
    – Kamesh
    Commented Feb 25, 2020 at 10:37
  • You're welcome. You can share it in answer to your question to help the community.
    – bAbdenour
    Commented Feb 25, 2020 at 10:39

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.