Display loading icon while file is uploaded

Question

I am attempting to show some type of a loading icon when a user uploads a file. I am using a basic type file upload.

Here is my control code that I am using:

VIEW:

  <input type="file" onchange="form.submit()" class="multiple" name="files" id="fileUploadBox"  value="Upload Files"multiple />

I have a method in my controller that accepts the file and saves to our database.

You can see that in my code I have onchange="form.submit" which submits the form after the user selects a file. I preferred this way instead of the user having to click another button after selecting the file to submit the form.

My issue is that when the user selects a larger file, the page sits for awhile while loading and uploading the file and then submits the form 20-30 seconds later.

I am needing to add some code that shows some type of loading/spinning icon while the file is loaded in and the form is resubmitted.

I believe most of the loading occurs when the file is being uploaded and not during the form submit.

Any help is greatly appreciated.

While your app is processing the form it's data, you could set a boolean to isLoading = true and after that, just set it to false. — user2880072
– user2880072, Commented Oct 4, 2019 at 15:07

Topher · Accepted Answer · 2019-10-05 08:20:23Z

1

There are a number of options and libraries you can use. IF you're using JQuery you can use something like JQuery Loading Overlay works nicely. There's good documentation there as well.

You'd just change your onchange call to something like

onchange="submitForm();"

and have a javascript function like this for example:

function submitForm(){
    $("#spinner").LoadingOverlay("show");
    $("#form").submit();
}

There's tonnes of different spinners out there and you don't have to use a JQuery one. But the idea would be the same.

answered Oct 5, 2019 at 8:20

Topher

1,02911 silver badges20 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Mume · Accepted Answer · 2019-10-06 11:10:50Z

1

If you are using Bootstrap, i found that you can put text and a spinner. Look at it

<button class="btn btn-primary">
  <span class="spinner-border spinner-border-sm"></span>
  Loading..
</button>

answered Oct 6, 2019 at 11:10

Mume

1406 bronze badges

Collectives™ on Stack Overflow

Display loading icon while file is uploaded

2 Answers 2

Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related