Forum Academy Marketplace Showcase Pricing Features

[SOLVED] GUI feedback to file/image uploading (progress bar or spinning icon)

When the user uploads a file, by default there’s a thin progress bar at the top of the app. I’d like to use a progress bar or a rotating icon inside the app (in my case it’s profile image displayed after upload), but the issue is that I can’t get the “upload” event, or any actions related to it.
I tried focus the action, changed status etc but all that happens AFTER the file upload is done.

I got to this topic, but no solution is presented Build an uploading icon.

I think it’d be useful for a lot of uses and people.

Have you looked at the progress bar plugin ?

Yes, but no use - well, I couldn’t figure it out.
As I said, I can’t get to the steps in the “upload” action.

It’s a very easy scenario to replicate - get a image uploader connected to an image element, and tries to get the progress bar plugin to demonstrate the uploading progress.

If someone can help, I’d be grateful

Ah, ok, so you want something to happen whilst the file is uploading, the progress bar is a so step progress so won’t help here.

1 Like

So… I think I can get it to work on both desktop and mobile.

You put the file input inside a group.

Then make the spinner appear on click of the group.

And hide it when file input is changed.

The only slight issue is that the spinner is now visible during the file selection dialog, but it works on mobile whereas basing it off the file input having focus doesn’t.

1 Like

I’ll try it out then write you back

The multiuploader plugin displays a nice progress bar while uploading

3 Likes