Adding Progress Bar to Upload Form

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:

And in the content category we select Progress:

Select the progress bar, in the App Structure:

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

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

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

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

Then add new dynamic attribute:

In the styling menu, select style:

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

And select a dynamic value for it:

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

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:

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:

Open display and select Show:

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

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

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

Screenshot_32


WapplerPrevious   WapplerNext


5 Likes

Looks great, thanks Teodor. What might be interesting is adding/extending a progress bar on image resizing after upload.

This could be really useful for multiple uploads (with the still missing drop extension) as resizing could take some time and the user currently doesn’t know what’s going on on the page.

3 Likes

How can we use this for multiple file uploads? Currently percent object is for total percent of all files’ upload execution state.

The file upload progress values are showing the total progress, not per file.

For some reason I can’t find the progress bar in the content category


Do I have to make any changes to make it appear?
Thanks

Do you have the FORM selected as per the 2nd screenshot in Teodor’s tutorial above?

Are Bootstrap 4 and App Connect added on your page?

@Teodor, thanks that was the problem!
Best regards
Juan

Adding Progress Bar To Upload Form Using Bootstrap 5

Is this possible within Wappler 4?

1 Like

It’s still possible, with the same process.
Just follow this tutorial and it’ll work. :slight_smile:

1 Like