Discuss

Adding Progress Bar to Upload Form

On this page

You already know HOW TO CREATE AN UPLOAD FORM and upload files to your server. Sometimes, for large files it is useful to have some kind of indication, that the file is uploading. The progress bar component is really useful here!

We'd like to add the progress bar, below our upload form, so we select add after:

Screenshot_15|690x396

And in the content category we select Progress:

Screenshot_16|690x396

Select the progress bar, in the App Structure:

Screenshot_17|690x396

You can add a label inside it, we add the following text Uploading...

Screenshot_18|690x396

Then, we set the default width to 0, as we are going to use dynamic width:

Screenshot_19|690x396

Then select the style. We set it to primary as blue is our favorite color:

Screenshot_20|690x396

Enable the striped and animated options if you want tour progress bar to be animated and striped:

Screenshot_21|690x396

Then add new dynamic attribute:

Screenshot_22|690x396

In the styling menu, select style:

Screenshot_23|690x396

We'd like to animate the width of the progress bar, so we enter the width css property:

Screenshot_24|690x396

And select a dynamic value for it:

Screenshot_25|690x396

Under your upload server action form, open uploadProgress and select percent:

Screenshot_26|690x396

This sets the dynamic value for the width, but the width property expects the value to be followed by an unit. In our case the unit is % so we just add +'%' to the expression. This is required and the progress bar won't work if you don't add it:

Screenshot_27|690x396

Then - we want to show the progress, only when the upload server action runs (nobody likes an empty progress bar) :slight_smile: So, select the Progress component in the app structure and add new dynamic attribute:

Screenshot_28|690x396

Open display and select Show:

Screenshot_29|690x396

And click the dynamic data picker button, to select when to show the progress:

Screenshot_30|690x396

We'd like to show it, when the server action is executing, so under your upload server action form open state and select executing:

Screenshot_31|690x396

And you are done. Now you will see a nice, animated progress bar when you upload your files:

Screenshot_32|646x300


WapplerPrevious|101x31   WapplerNext|77x31