Introduction #

A progress bar is one of the most useful widgets for a user interface when the user can perform lengthy tasks. Unfortunately, while it's a widget very often found in desktop applications it's not so common in web applications. The reason for this is that it's not so obvious how to implement them.

This article shows how easy it's to add an bar to show the progress of a file upload in Liferay.

How to add the progress bar to your own portlet #

Simply add the following taglib invocation at the end of the JSP:

 <liferay-ui:upload-progress
    id="<%= uploadProgressId %>"
    message="uploading"
    redirect="<%= HtmlUtil.escape(redirect) %>"
  />

And invoke it with JavaScript from the submit button:

 <input type="submit" value="<liferay-ui:message key="upload" />" onClick="<%= uploadProgressId %>.startProgress(); return true;"/>

Note that the value of uploadProgressId can be any String but it must be unique. One way to generate a unique String is:

 String uploadProgressId = PwdGenerator.getPassword(PwdGenerator.KEY3, 4);

How this works #

The taglib will add some JavaScript code that will poll the server every few seconds to get the percentage of the file uploaded so far. Liferay's file upload mechanism automatically updates the state of the upload as a request attribute so the poll request is actually very light.

If you are curious and want to know more about how this works, check the LiferayServletRequest and LiferayInputStream classes for information about how the status of the upload is maintained, and upload_progress_poller.jsp for information about how the state is checked and sent to the progress bar. Check upload_progress.js for the JavaScript code that performs the polling and does the actual rendering of the progress bar.