How to check if user interrupted ajax upload

Question

I use this piece of code to upload files via ajax to my website:

   jQ(document).on('submit', '#upload_file', function(e) {

      e.preventDefault();
      jQ('#mensagem').html('<div class="loader" style="text-align: center;">Enviando arquivo...</div>');
      jQ.ajaxFileUpload({
         url         :'<?php echo base_url('chamados/anexar_arquivo')?>', 
         secureuri      :false,
         fileElementId  :'userfile',
         dataType    : 'json',
         data        : {
            'desc' : jQ('#desc').val(),
            'chamado' : jQ('#codigochamado').val()
         },
         success : function (data, status)
         {
            if(data.status != 'error')
            {
               jQ('#anexos').html('Carregando anexos...');
               refresh_files();
               jQ('#desc').val('');
                var alert = '<div class="alert alert-success fade in"><button type="button" class="close" data-dismiss="alert">×</button>';
            }
            else
            {
               var alert = '<div class="alert alert-danger fade in"><button type="button" class="close" data-dismiss="alert">×</button>';
            }
            jQ('#mensagem').html(alert+data.msg+'</div>');
         }

      });
   });

And it works great! The user choose the file, click "Upload" and then I load a loading gif until it gets replaced by the success - or error - message.

The problem is that when the file is uploading, it shows up on the browser and you can cancel the call click the "X" button on the browser. When I do that the loading gif do not disappears and it keep showing "uploading file..." even if the process of uploading was aborted.

Is there any way to check if the upload was aborted so I can update the screen with an "upload aborted by the user" message?

I tried the error: function(e){} on the parameters of the ajax call, but it doesn't seem to pass there when the process gets aborted.

Why not remove the loader and text as soon as the user clicks cancel? Is it possible that the cancel operation will fail? If the cancel does fail, you could always bring back the loader and text. — Lix, Feb 19 '14 at 17:44
There is no cancel button on my form, what I mean by cancel is the "Stop" button on the browser. Because the browser shows that is loading up stuff, and the user can abort it — Victor Hugo, Feb 19 '14 at 17:46
I've never used it before, but you might try this https://api.jquery.com/ajaxStop/ — MaKR, Feb 19 '14 at 19:07
It works when the ajax call is done. But if it gets aborted, then it doesn't get triggered. — Victor Hugo, Feb 19 '14 at 19:15

score 0 · Answer 1 · edited May 23 '17 at 12:20

Edit: There's an HTML5 event, progress, which you could check for changes and stop Ajax, and the uploading animation, when it doesn't show changes over a couple of seconds. It looks like you're using some file upload plugin so I'm not sure if it can be done easily through that. With plain jQuery it might look like below. Note I haven't tested this at all, but it might at least provide a starting point. Edit the number 120 to change the amount of time waited (in seconds) between checks for upload progress:

var lastProgress;
var lastTime = new Date() / 1000;
$.ajax( { 
    xhr: function(){  
        var xhr = new window.XMLHttpRequest(); 
        xhr.upload.addEventListener("progress", function(evt){
            var newTime = new Date() / 1000;
            if (newTime > lastTime + 120){
                if (evt.lengthComputable) {
                    if (evt.loaded == lastProgress) {
                        ...[stop the upload graphic etc]...
                    } else { 
                        lastTime = newTime;
                        lastProgress = evt.loaded;
                    }
                }
        }, false);
    return xhr;
    },

    url: ... 
        ... [and the rest of the ajax parameters] ...
});

Original answer: I know this sort of a cop-out, but you could provide your own stop button within the form. You could direct users to click on it, instead of the browser stop button, if they want to cancel the upload.

There doesn't seem to be a way to actually detect clicks on the browser stop button, as far as I've seen.

Also see: Jquery Browser's stop button event

Even if I created a cancel button, the Stop Button on the browser would still be available for clicking. And that's exacly the problem: I can't detect when it is clicked. — Victor Hugo, Apr 29 '14 at 22:13
@VictorHugo: That would be the point of notifying users not to use the stop button. I'm adding something I found to my answer above though. — equazcion, Apr 29 '14 at 23:10

How to check if user interrupted ajax upload

1 Answers1