我如何通过AngularJS视图/控制器将文件上传到C＃代码背后？

Question

I have an Angular view and controller which collect user data from several forms. The data from the Angular code is then passed to several C# classes. The user data currently comes into C# as an IEnumerable<> object; this collection has a type of FormData, which is a custom class of 6 properties (no methods). All user data is stored in the 'Data' property of the FormData class via the IEnumerable<> object, and the 'Data' property is a string. Because 'Data' is a string, any file uploads that enter the C# come in as a string, not an actual file. Here's the View:

<div data-ng-controller="customFormController as formController" data-ng-init="formController.init(@Model.Form, '@Model.EmailResults', '@Model.EmailTo')">
    <div data-ng-if="!formController.loading && !formController.submitted" mc-form data-on-submit="formController.submit(model, formData)" data-on-file-select="formController.fileSelect(e)">
    <!--form fields are added dynamically via a separate set of Angular/C# controllers-->
</div>
</div>

Here's part of the controller:

self.submit = function (model, formData) {

                var deferred = $q.defer();

                var formPostData = {
                    formId: self.formId,
                    data: formData,
                    emailData: self.emailData,
                    emailTo: self.emailTo,
                    saveData: true
                };

                customFormService.postData(formPostData).then(function (result) {

                    self.submitted = true;
                    deferred.resolve(result);

                    window.location.href = '#form-' + self.formId;

                    // push any files
                    if (typeof window.FormData !== 'undefined' && result) {
                        var formData = new FormData();

                        if (fileList && fileList.length) {
                            for (var f in fileList) {
                                if (fileList.hasOwnProperty(f)) {
                                    formData.append('file', fileList[f]);
                                    console.log('Files added to formData property');
}
                            }
                            customFormService.postFiles(result.data, formData);
                            console.log('files posted to customFormService');
                        }
                    }
                }, function (err) {
                    deferred.reject(err);
                });
                return deferred.promise;
            }
//Here's the file-select method:
            self.fileSelect = function (e) {
                for (var x = 0; x < e.length; x++) {
                    fileList.push(e[x]);
                }
            }

Sorry, that was long-winded. Is there a way to grab the actual file object (not just a JSON string) using the Angular controller and access that object in C#? Thanks!

Answer 1

You'd basically need to submit a form containing the file inputs, then process it as multipart form data on the server. The files would come across as Streams.

Here's an example with code to get you started:

http://www.strathweb.com/2012/08/a-guide-to-asynchronous-file-uploads-in-asp-net-web-api-rtm/

Answer 2

The full solution for this problem is laid out below:

//get files from custom form controls
self.fileSelect = function (files) {
    var reader = new FileReader();
    reader.onload = function (e) {
        console.log("about to encode");
        $scope.encoded_file = btoa(e.target.result.toString());
    };
    reader.readAsBinaryString(files[0]);
    self.file = files[0];
    filesFromFileSelect.push(files[0]);
}

//need to post files one at a time. a loop iterates through the files array.
customFormService.postFiles(filesFromFileSelect[i], formDataForFile, self.formId, strResult, formFieldId)
    .success(function (data) {
        self.submitted = true;
        console.log('file posted', data);
    })
    .error(function (data) {
        self.submitted = false;
        console.log('error posting file. Message: ', data);
    });

//inside the service posting the files...
function postFiles(postfile, formData, formId, strResult, formFieldId) {
    var fd = new FormData();
    fd.append("data", JSON.stringify(formData));
    fd.append('file', postfile);

    return $http.post('/api/customformfile/post?id=' + formId + '&submissionGuid=' + strResult + '&formFieldId=' + formFieldId, fd, {
                withCredentials: false,
                headers: {
                    'Content-Type': undefined
                },
                transformRequest: angular.identity
            });
    }

//essential parts of the server-side controller handling the files...
var httpPostedFile = HttpContext.Current.Request.Files["file"];
if (httpPostedFile != null) {
    var savePath = "\\someFile\someOtherFile";
}

try {
    var uploadsDirectory = savePath;
    string pathToCheck = savePath + fileName;
    char[] charsToTrim = { '"', '\\', '/' };
    string trimmedFileName = fileName.Trim(charsToTrim).Replace(' ', '_');
    string tempFileName = trimmedFileName;

    if (File.Exists(pathToCheck))
    {
        int copyCount = 2;
        while (File.Exists(pathToCheck))
        {
            //insert copy number of file before file extension
            if (tempFileName.IndexOf('.') != -1)
            {
                tempFileName = trimmedFileName.Insert(trimmedFileName.IndexOf('.'), "_(" + copyCount + ")");
            }

            pathToCheck = savePath + tempFileName;
            copyCount++;
        }
        httpPostedFile.SaveAs(Path.Combine(uploadsDirectory, tempFileName));
    }
    else
    {
    httpPostedFile.SaveAs(Path.Combine(uploadsDirectory, trimmedFileName));
    }
}
catch(Exception fileEx) {
    //log the error
    return Request.CreateResponse(HttpStatusCode.InternalServerError, exc.Message);
}

Processing the files one at a time is an ugly way to do it, but it works for now. Will investigate other ways to process a whole file array vs. one file at a time in the future.