How to display percentage as progress during an upload

I would like to display a progress bar such as the one below, any ideas on how I could go about this? I’m more interested on the percentage part as the upload progresses.

1 Like

Hi @djpapzin

The % is there by default. You can use this plugin.

Once you have installed your Plugin you can then draw your progress bar where ever you want to put on your page.

On the bar properties, click on the Element Inspector to create a state., click Add a new custom state
image
image

On the percentage tap choose to insert dynamic data from that customer state that you just created, insert from Progress bar A’s Percentage.
image

You can then start with the Workflow, setting your progress bar to state at 0 when page load. This is optional.
image

1: Create an event to trigger the bar to start counting. Here I just used a button to start the progress bar just to answer your question.

image

You can set your bar to stat at 10% when your event is triggered.
image

step 2: add a pause to animate the progress of the bar. I added a 1minutes(1000ms) pause. You can choose any.
image
image

Repeat step 1 again, but this time increasing the value of your progress bar and a pause action after it again.
image

Repeat these two steps one after another until you get to your progress bar to load to 100%

Your Work should look similar to this when you’re done.

I hope this helps.

1 Like

@mxolisipn, Howzit Bru!!!
(I am ex-saffer living in NYC now, and saw that you are from the old country from your recent post asking about payment gateway).

Anyhow, thats a cool solution you posted, and I do think it will provide @djpapzin’s users with a semblance of the UX he is looking for, but isn’t it a little imprecise? In other words, for the progress bar to accurately reflect true load progress there needs to be a tie to the %age of the actual load, which I don’t think Bubble exposes.

Also, I think you could achieve the same effect in your workflows with less actions by doing one action that says “Set percentage = percentage + 10”.

Very interested to get your thoughts on this as I also have been trying to find an elegant solution to this problem.

Cheers

Hey man.I’m a great thanks, hope you good too.

been struggling about the payment gateway until, but someone told about JS injector which I’m yet to read more into it and see how it goes and how does it work.

Regarding a progress bar animation, I think the “Set percentage = percentage + 10” might not work with one action. It will just add the 10 to the value set on the first trigger and then stops there since it’s not loading as per the actual loading or delay.

Upgrade to version 6 of the Bubble engine. That is now built-in.

3 Likes

Hi @mxolisipn

Thank you for your detailed help. After going through your reply, I realised I should’ve been more specific, I was referring to file uploads, can I get the plugin to work when using a file uploader?
To My understanding, this plugin only works for page loads and slide shows?

@djpapzin, did you see @sudsy’s advice. It is now built in to v6. I didn’t realize this until seeing this advice.

1 Like

Hi @sudsy

I just upgraded now, thanks for the heads up.

1 Like

@SerPounce Yes I did, unfortunately I still see the small blue line as the progress bar. Is there anything I could’ve missed after the upgrade? @sudsy

@djpapzin @SerPounce

The file uploader has been there all along, they just increase the file size of the files you can upload.

@djpapzin, Set the state of the progress bar percentage to increase as per each is passed in your workflow.
image

So if you have 5 steps in your workflow, this is what you’ll do.

after step1: Set percentage value to 20%
after step 2: set percentage value to 40%
after step3: step percentage value to 60%
after step4: set percentage value to 80%
after step5: set percentage value to 100%

I believe this is what you meant when you said you more interested in the percentage part as the upload progresses. the actual percentage as the workflow through all the steps.

This is my login workflow page: as example

You can even do it like this if you want: when a login button is clicked, set the state of the progress bar to 50% and when the user has logged in, set the state of the progress bar to 100% then navigate.


I might have misunderstood what you wish to accomplish, but the new feature with regard to uploading is that the numeric percentage is now available to you as an exposed state, and the progress bar, while it still appears, now actually reflects reality. :slightly_smiling_face:

EDIT: If you wish to hide the native Bubble progress bar - i.e. show your custom one instead - that’s a different issue. Since the progress bar color can be customized in your app settings, perhaps try making it transparent.

EDIT 2: Actually, now that I’ve said that, I’m not sure if the new percentage value is actually “wired” to the old progress bar, but you should still be able to make the built-in progress bar invisible as mentioned above.

@mxolisipn I believe we are misunderstanding each other. I don’t see how the progress bar connects with the file upload progress

@sudsy actually you understood me well.That’s what I’m looking for. When using the file uploader, i’d like to see the percentage which shows the progress of the upload.

This is exactly what i’d like to do if possible

:slightly_smiling_face: @djpapzin Ok thanks man. We are clearly misunderstanding each other lol. But thanks for the question.I learned something new today :handshake:

I wish you well and hope you find help for your question. :v:

2 Likes

Hi @sudsy
I’m more interested in getting it to display percentage for progress.

The behavior of the built-in progress bar can’t be changed, but you can display the upload percent in any element you want, including Bubble’s progress bar element (which you might have to install via the plugins tab).

2 Likes

@sudsy

Thank you, this is exactly what I wanted to do with progress bar.

1 Like

Hi @sudsy

I tried using the file size to display the uploaded file size in mb as text but nothing seems to happen, any idea what could be the problem?

Did you get this worked out? If I understand correctly, you’re simply multiplying the percentage by the file size, right? Seems like that should work. If not, a screenshot might help.

First, I want to start by getting the file size of the uploading file displayed

then second step is to display the file size uploaded as the upload progresses