[Reactive Multiple File Upload] How to Show/hide a spinner when file upload starts/finishes with File Upload?
Forge component by José Pedro Proença
Application Type
Reactive
Service Studio Version
11.11.6 (Build 44614)

When selecting a file I wait seconds before seeing the loaded file on the screen. Is it possible to show a spinner when the file is loading?

I tried with the onChange event but it doesn't work.




Solution

Hi everyone,

Based on the feedback from Pier Paolo Annis a new version of the component was just uploaded to the forge with the following change log:

Multiple File Upload with Temporary Table:

- Added New events to enable or disable the loading animation with more precision;

- Added Maximum number of files allowed per upload;

- Added Clear all files functionality;


Multiple File Upload Binary:

- Created a brand new block that allows you to get the binary files and manage the upload on your own application, without storing then on this component temporary table;

General improvements:
- Upgraded to the latest OutSystemsUI (version 2.6.9)

- Added Loading Animation block that can be used on other contexts

Please go ahead and try it :)


Thanks everyone for the feedback.

Hello Pier Paolo Annis ,

You have these options as shown in the image



I hope it's useful

Best reguards.





Hi Pier Paolo Annis :)

I'm part of the team that developed the widget.

The component should display a loading animation like this by default:

Your intention is to replace it with a spinner?


Thanks for the feedback

hi @José Caldeira,

The spinner is shown only if I load a small file, if it is a large file it is not shown.

For example, when I upload a file of size 14136KB, the spinner is not shown.


thanks

Hi Pier,

In "MultipleFileUploadReactive_CW" module, Place your spinner container into "Loading_div" container as per below screenshot. Delete other 3 containers (with style "animateLazyContainer").

Don't change others. OnChange actions are configured/Coded well.

Thanks,

Aadhavan S

Hi Pier,

You can use a popup spinner just by creating a Boolean local variable for handling the Popup open and close and you can pass the variable in between the client action so that it can open the spinner and close once the data is loaded or required action is done.


It will look like this in the browser


Hello pier,

Please go through this component. This is spinner and put that spinner in the true state of IF condition and control your visibility as per your requirement.

once you click upload, after the start node manage the visibility to true and after your action before End make visibility false of that spinner.

this will be your upload click Action 

Start  --> spinner Visibility True --> your Logic part --> spinner visibility False --> End

https://www.outsystems.com/forge/list?q=Screenloader&t=&o=most-popular&tr=False&oss=False&c=%20&a=&v=&hd=False&tn=&scat=forge

And download demo as well you will get clear idea about it how to used full screen loader/spinner.


Thanks and regards,

Akshay Deshpande.

Solution

Hi everyone,

Based on the feedback from Pier Paolo Annis a new version of the component was just uploaded to the forge with the following change log:

Multiple File Upload with Temporary Table:

- Added New events to enable or disable the loading animation with more precision;

- Added Maximum number of files allowed per upload;

- Added Clear all files functionality;


Multiple File Upload Binary:

- Created a brand new block that allows you to get the binary files and manage the upload on your own application, without storing then on this component temporary table;

General improvements:
- Upgraded to the latest OutSystemsUI (version 2.6.9)

- Added Loading Animation block that can be used on other contexts

Please go ahead and try it :)


Thanks everyone for the feedback.

Community GuidelinesBe kind and respectful, give credit to the original source of content, and search for duplicates before posting.