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.

Answer 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.

Answer 2

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>