0

I want to abort my AJAX file upload, using XML abort function.

Below is script (jQuery), showing my AJAX request call:

var jqXHR = new window.XMLHttpRequest();
$("#file_uploading").change(function(e) {
    var fullPath = $('#File-upload-0').val();    
    var output = fullPath.substr(0, fullPath.lastIndexOf('.')) || fullPath;
    var filename = output.replace(/^.*\\/, "");
    $('#cancel_btn').removeClass('hidden');
    //console.log(filename);
    $('#f_name').val(filename);
    $('#reupload_block_cl').addClass('alert-success').removeClass('alert-danger');
    $('#loader').removeClass('hidden');
    e.preventDefault();
    $.ajax({
        url: window.reuploading_file,
        type: "POST",
        data: new FormData(this),
        contentType: false,
        cache: false,
        processData: false,
        success: function(data) {
            //alert(data.success);
            if (data.success) {
                $('#cancel_btn').addClass('hidden');
                $('#loader').addClass('hidden');
                $('#reupload_block_msg').html(data.success);
                $('#reupload_block').removeClass('hidden');
            }
        }, 
        error: function(data) {
            //alert(data.success);
            var obj = jQuery.parseJSON(data.responseText);
            var str = obj['file'][0];
            if (str.startsWith("The file may not be greater than")) {
                $('#loader').addClass('hidden');
                $('#cancel_btn').addClass('hidden');
                $('#reupload_block_msg').html(str);
                $('#reupload_block_cl').addClass('alert-danger')
                    .removeClass('alert-success');
                $('#reupload_block').removeClass('hidden');
            } else {
                $('#loader').addClass('hidden');
                $('#cancel_btn').addClass('hidden');
                $('#reupload_block_msg').html(str);
                $('#reupload_block_cl').addClass('alert-danger')
                    .removeClass('alert-success');
                $('#reupload_block').removeClass('hidden');
            }
        }           
    });
});

and on the cancel button click, what I want to achieve is: to abort AJAX request.

Below is my cancel button click function script (jQuery) which is not working as expected:

$('#final_upload').on('click', function() {
    jqXHR.abort();
    $('#loader').addClass('hidden');
});

What am I doing wrong and how can I resolve it?

nyedidikeke
  • 6,899
  • 7
  • 44
  • 59
Priyank lohan
  • 483
  • 1
  • 6
  • 17
  • 1
    Possible duplicate of http://stackoverflow.com/questions/27749521/abort-file-upload-ajax-request – undefined_variable Jan 17 '17 at 06:34
  • You have not defined `xhr`. First you have to use `var xhr = $.ajax({` and then it will work fine... – EhsanT Jan 17 '17 at 06:37
  • i had tried that too. but did not work that time also gives error xhr i not define. – Priyank lohan Jan 17 '17 at 06:40
  • Possible duplicate of [Abort file upload ajax request](http://stackoverflow.com/questions/27749521/abort-file-upload-ajax-request) – xkcd149 Jan 17 '17 at 06:41
  • Only if you create `xhr` in different scope you may have not access to it in another scope! Please take a look at the link in other two comments and also [this one](http://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery) – EhsanT Jan 17 '17 at 06:44
  • thanks for the links you guys shared. but i am not getting any success in this. – Priyank lohan Jan 17 '17 at 06:57
  • Can you please edit your question and add the complete actual code that is not working to your post? – EhsanT Jan 17 '17 at 07:00
  • You are not storing the jqXHR objects returned by `$.ajax()` to any variables. Please take a look at the provided link carefully... – EhsanT Jan 17 '17 at 07:34

1 Answers1

2

Check this.

http://api.jquery.com/jQuery.ajax/#jqXHR

The jqXHR object is not var jqXHR = new window.XMLHttpRequest();.

It should be var jqXHR = $.ajax(param);

fumihwh
  • 1,239
  • 7
  • 13