Loading animation while file is uploading

In my app, I use file upload and picture upload inputs. The user clicks on the input and selects their file. Then they click an “upload” button that I created which makes the right changes to the database.

The problem I’m having is that, when a user selects their file, it takes a few seconds for the file to load up into the input and they can’t click “upload” until that happens. If the file is large, they sit there with no input until the text in the input box changes to the file name for 5 or so seconds. I want to add a loading animation, but I can’t find a way to trigger a workflow for when a user selects a file.

You can set up a hidden icon that rotates:
image

Then show the icon when the PictureUploader is loading:
image

2 Likes

Sorry for hijacking the thread… @jonathan.baxter1991 is there a way to do the same for multi-file uploader - drop zone as well?

I think the multi-file uploader already has a loading bar but I don’t think you can do the same constraint. What are you trying to do?

The multi-file uploader’s progress bar is ugly and I’ve hidden that element once the user have selected their files for upload.

I intend to show a pop up of a spinning icon on my page instead of the progress bar but there’s no way to trigger that.

1 Like

I have also tried that with no luck

This topic was automatically closed after 70 days. New replies are no longer allowed.