How can I upload a file to C# code-behind via an AngularJS view/controller?

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!

There are plenty of resources online, monox.mono-software.com/blog/post/Mono/233/… is one of them. You need a HTML Form to do it as only a browser can send the file over HTTP you cannot send the binary as JSON. — Gabriel Sadaka
– Gabriel Sadaka, Commented Apr 18, 2016 at 22:41
@gabriel: thanks, I forgot about this post. I was able to get the binary data using a FileReader() object, read each file as a binary string, and send those files off in an array via angular. — SammyPayne
– SammyPayne, Commented Jun 20, 2017 at 20:10

Colin · Accepted Answer · 2016-04-18 22:39:02Z

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/

answered Apr 18, 2016 at 22:39

Colin

4,16524 silver badges44 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

SammyPayne Over a year ago

I tried the code on that website and unfortunately the IsMimeMultipartContent() method returns false, and I don't get to the code that writes the file data to the server. Is the raw file data being sent to the server via the URL? I'm new to programming and I never thought about how file data from a pdf/jpg/etc would be sent to a server.

SammyPayne Over a year ago

I was eventually able to get the files using the HttpContext.Current.Request.Files property. I saved each file using SaveAs("path") on the HttpPostedFile class. Details to follow in an actual answer.

SammyPayne · Accepted Answer · 2017-06-20 21:50:32Z

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.

Collectives™ on Stack Overflow

How can I upload a file to C# code-behind via an AngularJS view/controller?

2 Answers 2

2 Comments

Comments

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Related