0

Following function is used to upload a file. Now I want to cancel file upload on button click. How to do this?

function submitForm(form) {
        var loader = new Loader({showPgBar : true});
        var progressBar = loader.progressBar();
        loader.show();
        var data = new FormData(form);
        data.append("category", "MEDIA_FILE");
        var csrf_headerName  = $("meta[name='_csrf_header']").attr("content");
        var csrf_paramValue  = $("meta[name='_csrf']").attr("content");
        $.ajax({
            type: "POST",
            enctype: 'multipart/form-data',
            url: URI.file.singleFileUploadUrl(),
            data: data,
            beforeSend: function (request) {
                request.setRequestHeader(csrf_headerName, csrf_paramValue);
            },
            processData: false,
            contentType: false,
            cache: false,
            timeout: 1740000,  //29 minutes
            success: function (data) {
                loader.hide();
                mediaFileMetaDataSave(data ,null);
                document.getElementById('media-file-form').reset();
            },
            xhr: function(){
                var xhr = $.ajaxSettings.xhr() ;
                xhr.upload.onprogress = function(data){
                    progressBar.updateStatus(data);
                };
                return xhr ;
            },
            error: function (e) {
                loader.hide();
                toastr.error('Error has occurred while uploading the media file.');
            }
        });

     }

Edit:

I have called the xhr.abort() like below. Although I clicked the cancelFileUpload button nothing happens. I have checked the console in browser. No errors appeared as well.

xhr: function(){
            var xhr = $.ajaxSettings.xhr() ;
            xhr.upload.onprogress = function(data){
                document.getElementById("cancelFileUpload").onClick = function(){
                    xhr.abort();
                }
                progressBar.updateStatus(data);

            };
            return xhr ;
        },

Why is this not working?

sndu
  • 933
  • 4
  • 14
  • 40
  • does the request take a very long time or something? – ewizard Nov 21 '17 at 03:51
  • Nope. But I want to add the cancel option as a new feature – sndu Nov 21 '17 at 03:51
  • yah im just saying...they would have to click it quickly after submitting...would they still have time to cancel after deciding to cancel? once the request goes out you can't cancel it...it has to run its course...im not sure if u can do what you want to – ewizard Nov 21 '17 at 03:52
  • yes. video files take quiet long time to be uploaded – sndu Nov 21 '17 at 03:53
  • oh ok its a video – ewizard Nov 21 '17 at 03:53
  • try using a plugin like jquery file upload – Prasanna Venkatesh Nov 21 '17 at 03:54
  • @PrasannaVenkatesh file upload can be done. Now I want to cancel while uploading – sndu Nov 21 '17 at 03:55
  • jquery-file-upload is a plugin which has cancel option – Prasanna Venkatesh Nov 21 '17 at 03:55
  • 1
    use `xhr.abort()` method in the `xhr.upload.onprogress = function(data){ progressBar.updateStatus(data); };` with conditionals for a variable or something when your button attempts to cancel by changing the state of the variable....`if(buttonstate == true) { xhr.abort(); }` something like that...im seeing now how its structured it might be difficult to detect a button click from inside the ajax function – ewizard Nov 21 '17 at 03:56
  • @ewizard how can I call this function on a button click – sndu Nov 21 '17 at 03:59
  • 1
    https://stackoverflow.com/questions/7940213/aborting-the-xmlhttprequest this might help you – Prasanna Venkatesh Nov 21 '17 at 04:00
  • @PrasannaVenkatesh link looks like the solution – ewizard Nov 21 '17 at 04:02
  • possible answer is here https://stackoverflow.com/questions/446594/abort-ajax-requests-using-jquery – Alex Kudryashev Nov 21 '17 at 04:10
  • xhr.upload.onprogress = function(data){ progressBar.updateStatus(data); document.getElementById("cancelFileUpload").onClick = function(){ xhr.abort(); } }; – sndu Nov 21 '17 at 05:13
  • @ewizard I did like this. But when I clicked the cancel button nothing happens – sndu Nov 21 '17 at 05:14

0 Answers0