Search code examples
angularjsfile-uploaduploadng-file-uploadcancel-button

Cancel Angular File Upload


I am not able to cancel an uploading file request from angular, I am using the below mentioned plugin to upload a file and according to the author it feels like it is way to simple, but I am not sure how should I implement it. This is how I am uploading the files, from Angular plugin files gets posted to php and php intern reads the entire file and streams it to java api through curl, so, now I have a Cancel button and once user clicks on that cancel upload button I need to be able to stop the upload from angular plugin, so once the upload is stopped I can make another call to clean up half streamed file....and other clean up stuff.

Plugin Link: https://github.com/danialfarid/ng-file-upload

$scope.uploadFiles = function(files) {

if(files != undefined){
    $scope.currentFileUploadList = files;
    $scope.$apply();
}
angular.forEach(files, function(file, key) {
    if(isSpecialChar(file.name)){
        //$scope.currentFileUploadList[key].status = false;
        //$scope.$apply();
        file.upload = Upload.upload({
            url: $scope.BASE_FOLDER+'/sync/file/upload',
            fields: {csrf_token: $('.csrf_token').html(), path: 'ParaBlu'},
            file: file
        });

        file.upload.then(function (response) {
            $timeout(function () {
                file.result = response.data;
                if(response.data.result == 'success'){
                    $('.status').hide();
                    toastr.success(response.data.file.fileName+' has been uploaded successfully', 'Successfully!!!', {allowHtml: true});
                    $scope.currentFileUploadList.forEach(function(value, key){
                        if(value.name.toString() == response.data.file.fileName.toString()){
                            $scope.currentFileUploadList.splice(key, 1);
                        }
                    });
                    if((files.length) == key){
                        $('#uploadFiles').modal('hide');
                    }
                }else{
                    toastr.error(file.name, response.data.msg, 'Fail!!!', {allowHtml: true});
                }
            });
        }, function (response) {
            if (response.status > 0)
                $scope.errorMsg = response.status + ': ' + response.data;
        });

        file.upload.progress(function (evt) {
            file.progress = Math.min(100, parseInt(100.0 *
                evt.loaded / evt.total));
        });
    }else{
        $scope.currentFileUploadList.forEach(function(value, key){
            if(value.name.toString() == file.name.toString()){
                $scope.currentFileUploadList.splice(key, 1);
            }
        });
        toastr.error('Special characters like ( * \ | : " < > ? / ) are not allowed, in a file name.', 'Fail!!!', {allowHtml: true});
    }
});

};


Solution

  • It was not a problem with the plugin rather with the streaming, I had to cancel the php file streaming separately to cancel the upload, process, not sure y? I though setting user interruption to false in php.ini would stop the php curl request as well once the ajax request is cancelled but it did not happen, anyway thanks for your help.