Angular handling return data from Web Api as error

Question

I am using Angular to call an ASP.NET Web API endpoint that accepts a file containing customer records and imports them into a database. The import works fine but I am having trouble figuring out how to display the results of the import to the user. I would like to list each record imported and show if it was successful.

+----------+-----------+---------------+
| LastName | FirstName | Import-Status |
+----------+-----------+---------------+
|   Smith  | Tom       | Success       |
+----------+-----------+---------------+
|  Manning | Pam       | Failure       |
+----------+-----------+---------------+
| Jenkins  | Alan      | Success       |
+----------+-----------+---------------+
| Zip      | George    | Failure       |
+----------+-----------+---------------+

To this end I am returning a collection of results from the Web Api ..

...
List<ImportResults> results = ProcessCustomerFile.ReadFile(uploadedFileName);
return Request.CreateResponse<IEnumerable<ImportResult>>(HttpStatusCode.OK, results);

Here is the Angular function handling the return

$scope.uploadFiles = function () {

    uploadService.uploadFiles($scope)
        // then() called when uploadFiles gets back
        .then(function (data) {
            // promise fulfilled
            if (data.length === 0) {
                alert("File Uploaded and Processed")
                $scope.formdata = new FormData();
                $scope.data = [];
                $scope.$apply;
            } else {
                // There is data being returned so assign to the $scope variable
                alert("File Uploaded and Processed with returned data");
                $scope.resultsCollection;
                $scope.$apply;
                alert(data);
            }
        }, function (error) {
            //Server Error
            $scope.uploading = false;
            alert("Function error " + error);
        }

        );
};

The problem I am having is that the AngularJS code seems to treat the returned data as an error. There are four records I am importing so since there are four objects in the message it looks to be the data I want. I am just not sure why it is being handled by the function (error) {}.

UPDATE: Adding the code for the uploadService

.factory('uploadService', function ( $http, $q) {
        return {
            uploadFiles: function ($scope) {

                var request = {
                    method: 'POST',
                    url: 'http://localhost:4321/api/customerupload',
                    data: $scope.formdata ,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                return $http(request)
                    .then(
                    function (response) {
                        if (typeof response.data === 'string') {
                            return response.data;
                        } else {
                            return $q.reject(response.data);
                        }
                    },
                    function (response) {
                        return $q.reject(response.data);
                    }
                    );
            }

        };
    })

Answer 1

Angular is not handling it as an error. It is just the input parameter name you have given is 'error'. It is referring the actual data.

In order to get some understanding;

In the uploadService return block( In sending files) instead of .then try it with .success and .error

 .factory('uploadService', function ( $http, $q) {
        return {
            uploadFiles: function ($scope) {

                var request = {
                    method: 'POST',
                    url: 'http://localhost:4321/api/customerupload',
                    data: $scope.formdata ,
                    headers: {
                        'Content-Type': undefined
                    }
                };

                // SEND THE FILES.
                return $http(request)
                    .success(function (response) {
                        if (typeof response.data === 'string') {
                            return response.data;
                        } else {
                            return $q.reject(response.data);
                        }
                    })
                    .error(function (error) {
                        return $q.reject(error);
                    });
            }

        };
    })

In the angular function where the service is invoked

    $scope.uploadFiles = function () {

    uploadService.uploadFiles($scope)
        // then() called when uploadFiles gets back
        .success(function (data) {
            // promise fulfilled
            if (data.length === 0) {
                alert("File Uploaded and Processed")
                $scope.formdata = new FormData();
                $scope.data = [];
                $scope.$apply;
            } else {
                // There is data being returned so assign to the $scope variable
                alert("File Uploaded and Processed with returned data");
                $scope.resultsCollection;
                $scope.$apply;
                alert(data);
            }
        })
        .error (function (error) {
            //Server Error
            $scope.uploading = false;
            alert("Function error " + error);
        });
};