2

I have an HTML form with input file like this:

<form method="POST" enctype="multipart/form-data">
    <input type="file" name="pic" accept="image/*">
    <button type="submit">Salva</button>
</form>

Sometimes, specially with large files, upload process goes on for a long time and user doesn't know what is happening.

Is there any jQuery/javascript event that can do stuff when uploading starts and do others when it finishes?

aletede91
  • 1,137
  • 2
  • 16
  • 30
  • Possible duplicate of [How can I create a "Please Wait, Loading..." animation using jQuery?](https://stackoverflow.com/questions/1964839/how-can-i-create-a-please-wait-loading-animation-using-jquery) – Angel Luis Apr 20 '18 at 13:54
  • @AngelLuis did you read my question? I'm not looking for a loading. I'm looking for how to intercept when upload file starts and when it ends! – aletede91 Apr 20 '18 at 13:56
  • You have the solution in that url, but you have to know work with the ajax method if you're using jQuery. Because upload files it's an async work. – Angel Luis Apr 20 '18 at 14:02

1 Answers1

0

Simply if you use bootstrap 3 or 4, you can set the loading state to the button.

For example:

var $btn = $(this);
 $btn.button('loading');
 // simulating a timeout
 setTimeout(function () {
   $btn.button('reset');
 }, 1000);

In addition to that, you can set data-loading-text attribute on the button and then the custom text will be displayed while loading state is on. You can also put some font awesome icon with spinner inside the data-loading-text attribute.

Or if you don't use Bootstrap you can use some plugin such as: jQuery LoadingOverlay

Martin
  • 1,259
  • 3
  • 17
  • 36
  • The first one can't be a solution! I don't want a fake 1second timer. I need to wait input upload end. The second one is very nice but it's not what I'm looking for. It's a simple loader. I need how to intercept the event. – aletede91 Apr 20 '18 at 13:49
  • Why this is not the solution? You can use reset method after the ajax call. – Martin Apr 20 '18 at 13:54
  • Mmmm..no ajax in code..I just want to do something (like show a div) when user select pic from his pc and hide it when upload is finish. – aletede91 Apr 20 '18 at 13:57
  • Here is a working example @[codepen](https://codepen.io/jmalatia/pen/HkmaA) – bmatovu Apr 25 '18 at 07:13
  • 2
    @bmatovu I think you didnt got the problem he is seeking solution for. This is not solution of what the user is asking , infact its not even near to an alternative of the solution – Shreyan Mehta Apr 17 '19 at 14:53
  • @ShreyanMehta; sorry the codepen is a working example of this answer, not the question. – bmatovu Apr 18 '19 at 07:07
  • @bmatovu codepen is working correctly , but both this answer and this codepen was not a solution according to me – Shreyan Mehta Apr 18 '19 at 08:13