Show Uploading Percentage status in loader

Question

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)?

Answer 1

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.

Answer 2

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.

UPDATE

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