How to show a progress bar while files are being uploaded

User Experience Knowledge Share
, ,
1

Hi,

In Pega 8, there are two controls that you can use to attach multiple files to a case.

  1. pzMultiDragDropControlStandard (Final)

  2. pzMultiFilePath (Final)

Out-of-the-box controls.png
Out-of-the-box controls.png1023×845 45.3 KB

Here is the out-of-the-box behavior of these two controls.

How to show a progress bar while files are being uploaded (OOTB, UI-Kit).gif

In this post, I’ve included a code snippet for both controls that enable to show a progress bar when files are being uploaded as below. Please see attached for how to build these controls.

How to show a progress bar while files are being uploaded (Custom, UI-Kit).gif

Notes:

*1. Since both of out-of-the-box controls are “Final”, you will have to create new controls from scratch. Also you will have to do Save As a series of sections that reference the out-of-the-box controls accordingly.

*2. We’ve created this because some customers requested it, but it is not really recommended to customize such low level functionality. I would suggest to use the out-of-the-box ones as much as possible, because of two reasons:

  • If any issues occur, it may get hard to know if it is coming from customization or product.
  • When upgrade, product enhancement made to the controls will not be applied and you will miss the chance.

Thanks,

How to show progress bar while files are uploaded.docx (229 KB)

2

@KenshoTsuchihashi it is not working with pega version 8.7.4 . any update to this script ?

3

@santhoshrams16632372

I just built both controls using the exact same code on the latest Pega Platform, version 8.8 with Theme Cosmos and verified everything worked fine just like 8.4.1, as shown below.

How to show a progress bar while files are being uploaded (Custom, Cosmos).gif

When you debug, the order is important - if things don’t work on a different version, try the original one that is verfied first, in this case 8.4. If things still don’t work, it is probably somewhere in your code, rather than the version difference. Also, I don’t intend to maintain this code for the future version. If you find the code not working after version 8.8, please submit an enhancement request so hopefully this functionality gets incorporated into the product by default.

Thanks,

4

@santhoshrams16632372 Were you able to get it to work?

We are able to get Progress Bar on File Upload but post 100% completion, its giving Forbidden Request 403 within Browser’s Console and forcing User Logout. See attached PDF for details.

Progress Bar Issue.pdf (334 KB)

5

@MRIDULKUMAR I can see from a seperate question you posted in parallel that you resolved the issue:

See How to show Progress Bar on File Upload? you posted 2 weeks ago:

Solution:

ddpng
ddpng962×478 45.6 KB