How to display a progress bar for file upload on Service Portal?

[Cathy Song1]

Hi All,

I have built a portal form using record producer to collect requests from internal customers. One of the issues we have is that the Portal doesn't display a progress bar when users upload files. You don't really know if the browser picked up your file until the upload is complete - files only appear on the page after 100%.

Does anyone know if there is a config setting to turn on the progress bar? Or do I need to write custom code for it?

Thanks,

Cathy

[Michal Gawlows1]

For anyone stumbling upon this topic. It is possible to add progress bar to OOB attachment functionality very easy. Most of the logic to update the value of progress bar is already in nowAttachmentHandler angularjs directive. 

If you wish to add it to e.g SC catalog item widget , find the line of code: 

 <now-attachments-list template="sp_attachment_single_line" ></now-attachments-list>

and after it add:

<div class="progress-wrapper">
<label for="file" class="progress-label" ></label>
<progress class="upload-progress" id="file" value="0" max="100"></progress>
</div>

The classes are the most important part becuase those are selected by jQuery inside nowAttachmentHandler.

You may also want to add class to hide progress-wrapper at start in CSS.

Additionally you may style it as you wish in CSS e.g:

.progress-wrapper{
  display: none;
}
progress[value] {
  /* Reset the default appearance */
  -webkit-appearance: none;
     -moz-appearance: none;
          appearance: none;
  
  /* Get rid of default border in Firefox. */
  border: none;
  
}


progress[value]::-webkit-progress-bar {
  background-color: #eee;
  border-radius: 2px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.25) inset;
}


progress[value]::-webkit-progress-value {
  background-image:
	   -webkit-linear-gradient(-45deg, 
	                           transparent 33%, rgba(0, 0, 0, .1) 33%, 
	                           rgba(0,0, 0, .1) 66%, transparent 66%),
	   -webkit-linear-gradient(top, 
	                           rgba(255, 255, 255, .25), 
	                           rgba(0, 0, 0, .25)),
	   -webkit-linear-gradient(left, #DFD139, #C83C36);

    border-radius: 2px; 
    background-size: 35px 20px, 100% 100%, 100% 100%;
  
}

[james_creative]

Michal,

This is a great solution. Where did you find the details regarding the nowAttachmentHandler angular directive?

[Michal Gawlows1]

Hi James,

I looked on community and found out some directives are only shown when accessing them directly with URL e.g <your instance>/scripts/angularjs-1.4/sn/common/attachments/factory.snAttachmentHandler.js

You can also find this code inside chrome debugger. 

Then becuase I had to replicate whole attachment functionality on custom modal inside SP I went through whole code of attachment handler and connected functionalities and found out that there is already a part of code which handles progress bars :

function updateProgress(percent) {
            if (self.prevPercent === percent && self.fileCount <= self.maxfiles)
                return;
            if (self.fileCount <= self.maxfiles) {
                if (percent > 99)
                    self.fileCount++;
                if (self.fileCount <= self.maxfiles) {
                    $timeout.cancel(self.errorTimeout);
                    self.errorTimeout = $timeout(broadcastError, 15000);
                    $('.progress-label').text('Uploading file ' + self.fileCount + ' of ' + self.maxfiles);
                    $('.upload-progress').val(percent);
                    $('.progress-wrapper').show();
                }
            }
            self.prevPercent = percent;
        }

Based on that I used simple HTML progress bar to handle above part of code from AttachmentHandler

[Sri56]

Hi Team,

As of now, when we upload the attachment we are getting as below:

So where we can add anjular js to get below screen?

Please help!

Thanks,

Sri

[Michal Gawlows1]

Hey Sri,

Were you following my instructions to get progress bar?