How to cancel/abort jQuery AJAX file upload

Question

I'm using Ajax file upload function with the status bar in a modal. The code is working fine. But when the user clicks the cancel button (while uploading) the modal is close but the file is getting the upload to the server in the background.

I tried xhr.abort(); function to cancel the upload. But it's not working. How to stop the file upload process when a user clicks the cancel button.

I'm using jquery 1.10.2 version.

$(function () {
        $('#showonlyvalue-portvid').hide();
        $('#btnuploadvideo').click(function () {
            if (jQuery("#verifyvideo-file").valid()) {
                $('.myprogress').css('width', '0');
                $('.successmsgfile-video').text('');
                var formData = new FormData();
                formData.append('portfoliovideos', $('input[name=portfoliovideos]')[0].files[0]);
                $('#showonlyvalue-portvid').show();
                $('#btnuploadvideo').attr('disabled', 'disabled');
                $('.successmsgfile-video').text('Uploading in progress...');
                $.ajax({
                    url: "<?php echo base_url(); ?>profile/port_videoone"
                    , data: formData
                    , processData: false
                    , contentType: false
                    , type: 'POST' // this part is progress bar
                    , xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete * 100);
                                $('.myprogress').text(percentComplete + '%');
                                $('.myprogress').css('width', percentComplete + '%');
                            }
                        }, false);
                        return xhr;
                    }
                    , success: function (data) {
                        console.log(data);
                        $('#upload-video-file').modal('hide');
                        swal("Success!", "Video has been uploaded!", "success");
                        $('#showonlyvalue-portvid').hide();
                        $('.myprogress').css('width', '0');
                        $('.successmsgfile-video').text('');
                        $('#btnuploadvideo').prop('disabled', false);
                        $('input.form-control').val('');
                        $("#verifyvideo-file")[0].reset();
                    }
                });
            }
        });
    });
$(document).on('click','.stopvideo', function(e){
    xhr.abort();
    xhr = null;
    console.log("Canceled");
});


<div id="upload-video-file" class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <form id="verifyvideo-file" method="post" class="padbtm20">
                    <div class="form-group width100 hirehide nomargin dispinline">
                        <input type="file" id="portvideoname" name="portfoliovideos" accept="video/mp4,video/x-m4v,video/ogv,video/webm,video/quicktime" required>
                    </div>
                    <div class="form-group" id="showonlyvalue-portvid">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>
                        <div class="successmsgfile-video"></div>
                    </div>
                    <div class="form-group margin18 dispinline">
                        <input type="button" id="btnuploadvideo" class="btn btn-primary" value="Upload" />
                        <button type="button" class="btn btn-default stopvideo">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

Answer 1

Does the console show any errors? I think this might be due to the fact that the xhr variable is out of the scope. Try placing that click listener below the xhr declaration.

Answer 2

Try a global variable and call .abort() on it:

var ajaxCall;

$(function () {
        $('#showonlyvalue-portvid').hide();
        $('#btnuploadvideo').click(function () {
            if (jQuery("#verifyvideo-file").valid()) {
                $('.myprogress').css('width', '0');
                $('.successmsgfile-video').text('');
                var formData = new FormData();
                formData.append('portfoliovideos', $('input[name=portfoliovideos]')[0].files[0]);
                $('#showonlyvalue-portvid').show();
                $('#btnuploadvideo').attr('disabled', 'disabled');
                $('.successmsgfile-video').text('Uploading in progress...');
                ajaxCall = $.ajax({
                    url: "<?php echo base_url(); ?>profile/port_videoone"
                    , data: formData
                    , processData: false
                    , contentType: false
                    , type: 'POST' // this part is progress bar
                    , xhr: function () {
                        var xhr = new window.XMLHttpRequest();
                        xhr.upload.addEventListener("progress", function (evt) {
                            if (evt.lengthComputable) {
                                var percentComplete = evt.loaded / evt.total;
                                percentComplete = parseInt(percentComplete * 100);
                                $('.myprogress').text(percentComplete + '%');
                                $('.myprogress').css('width', percentComplete + '%');
                            }
                        }, false);
                        return xhr;
                    }
                    , success: function (data) {
                        console.log(data);
                        $('#upload-video-file').modal('hide');
                        swal("Success!", "Video has been uploaded!", "success");
                        $('#showonlyvalue-portvid').hide();
                        $('.myprogress').css('width', '0');
                        $('.successmsgfile-video').text('');
                        $('#btnuploadvideo').prop('disabled', false);
                        $('input.form-control').val('');
                        $("#verifyvideo-file")[0].reset();
                    }
                });
            }
        });
    });
$(document).on('click','.stopvideo', function(e){
    ajaxCall.abort();
    console.log("Canceled");
});


<div id="upload-video-file" class="modal fade" tabindex="-1">
    <div class="modal-dialog" role="document">
        <div class="modal-content">
            <div class="modal-header"></div>
            <div class="modal-body">
                <form id="verifyvideo-file" method="post" class="padbtm20">
                    <div class="form-group width100 hirehide nomargin dispinline">
                        <input type="file" id="portvideoname" name="portfoliovideos" accept="video/mp4,video/x-m4v,video/ogv,video/webm,video/quicktime" required>
                    </div>
                    <div class="form-group" id="showonlyvalue-portvid">
                        <div class="progress">
                            <div class="progress-bar progress-bar-success myprogress" role="progressbar" style="width:0%">0%</div>
                        </div>
                        <div class="successmsgfile-video"></div>
                    </div>
                    <div class="form-group margin18 dispinline">
                        <input type="button" id="btnuploadvideo" class="btn btn-primary" value="Upload" />
                        <button type="button" class="btn btn-default stopvideo">Cancel</button>
                    </div>
                </form>
            </div>
            <div class="modal-footer"></div>
        </div>
    </div>
</div>

let me know