Build an uploading icon

I just wanted to share how I built this as it might help others. Some of my users were saying they were having trouble uploading music but really they weren’t waiting long enough to upload a large file before adding the title and genre and the file wasnt uploading correctly. So to fix this I created a giant loading icon that rotates over the screen. Choose an icon and make it rotate. Make it invisible and hinge it to turn on when your upload input is focused (because the input stays focused through the entirety of the upload). To turn it off again you can do a variety of things but I hinged mine off other other elements appearing (title, genre inputs).
Im sure you could hinge it off the new element states as well. Hope this helps somebody else that may be uploading larger files!

1 Like

This is a good one and something I´ve been trying to build.
Problem is my upload input doesn´t seem to be focused during upload.
At least the upload icon won´t react on the condition to be visible when upload input is being focused.

Exactly how have you set the conditions?

This is very helpful, thank you!

Hey kackur,
oddly my icon didnt show up the first time until i right clicked it and selected “bring to front”. im not sure if this is the problem you are having but its worth a try. also, here is what my conditions look like. Group song info upload is set to appear when the uploader is not empty. Hope this helps!

This just does´t work for me.
Seems like the image/file uploader doesn´t get focused for me when uploading.
I´ve tried both the image and file uploader.

I´ve also tried to have the icon visible from start but not spinning and the start spinning when focused, just to find out if it´s the visible thing or focused thing not working.
And nothing happens. So for some reason my uploader isn´t focused as your´s is when uploading.

Does anyone have any idea of what might be different for me here?
Does this work fine for others than @denverdave11?

1 Like

I also had this issue. For me, the uploading icon seemed to work fine when i tested it on desktop, but not on mobile.

When it did work, the picture input remained focused after the picture finished uploading, which caused the icon to remain visible and spinning even after loading was completed.

1 Like

Picking this one up again.

Seems like the issue is that the focusing part is different in different browsers.
I only tried it in Safari before, but now when I tried it in Chrome it did.
In Chrome the picture input is considered focused when uploading an image, while in Safari it isn´t.
Is this something that could be fixed from your part @emmanuel? How this behave in different browsers to make sure bubble apps while performer same way in cases like this.

@natedogg: I had the same issue in Chrome. A work around is to create a custom workflow that sets focus to another (specific) object once the pictureuploader-object has changed it value.

Hi there, I just noticed the progress bar plugin. Is this something i can attach to the uploader or is it more of a step by step progress bar like for filling out forms? I tried attaching it to my uploader but i cant seem to finish the string. Anybody try to use this yet? thanks!

Hi @denverdave11

You guessed it right - the progress bar plugin is a step by step for filling forms. It accepts a number that represents the completed percentage of a task - you have the freedom to define the percentage as you wish.

Full reference for it is at https://bubble.io/reference#Plugins.progressbar

Cheers,
George

3 Likes

Hi, I’ve tried this, still can’t seem to get it to be visible during an upload. Kindly assist.