While trying to implement a file upload form in a backoffice custom section, I stumbled onto quite a few obstacles and outdated/incorrect information in various forums (not only in Our;-) So, after I finally got it to work, I thought I'd share my solution and code here for anyone else interested.

First of all, you need to have your backoffice custom section up and running. There's a good article about how to do one here. From here, I will assume that you have one called "MySection".

The next thing you'll need is the ng-file-upload AngularJS directive from danialfarid. If you're in Visual Studio, there's a NuGet package called "angular-file-upload" which will install the .js files. Otherwise, get them from GitHub here. Ensure that you have the ng-file-upload-all.js file in your ~/Scripts folder.

ng-file-upload has a lot of functionality (drag-drop, etc.), some of which I may explore later, but for now I opted for a very simple file input control and an upload button. So in your edit.html markup for your custom section something like this:

                <div class="umb-pane">


                <umb-control-group label="File" description="File to upload">
                    <input type="file" class="umb-editor umb-textstring" ngf-select="" ng-model="files" ng-multiple="false" ngf-change="fileSelected(files)" required />
                </umb-control-group>

                <div class="umb-tab-buttons" detect-fold>
                    <div class="btn-group">
                        <button type="button" data-hotkey="ctrl+s" class="btn btn-success" ng-click="uploadFile()">
                            Upload
                        </button>
                    </div>
                </div>
            </div>

Note the use of the ng- and ngf- attributes. When you select a file (only one in my case), fileSelected(files) is called to store the local path and filename in the $scope. So that when the Upload button is clicked, and fileUpload() is called, it knows what file(s) to upload. I chose to put these two in the edit.controller.js for my section, so add this code:

    $scope.fileSelected = function (files) {
        // In this case, files is just a single path/filename
        $scope.file = files;
    };

    $scope.uploadFile = function () {
        if (!$scope.isUploading) {
            if ($scope.file) {
                $scope.isUploading = true;
                fileUploadService.uploadFileToServer($scope.file)
                    .then(function (response) {
                        if (response) {
                            notificationsService.success("Success", "Saved to server with the filename " + response);
                        }
                        $scope.isUploading = false;
                    }, function (reason) {
                    notificationsService.error("Error", "File import failed: " + reason.message);
                    $scope.isUploading = false;
                });
            } else {
                notificationsService.error("Error", "You must select a file to upload");
                $scope.isUploading = false;
            }
        }
    };

    $scope.file = false;
    $scope.isUploading = false;

Now we need the fileUploadService, which I chose to put in a separate file called file.upload.api.service.js:

angular.module("umbraco.resources")
.factory("fileUploadService", function ($http) {
    return {
        uploadFileToServer: function (file) {
            var request = {
                file: file
            };
            return $http({
                method: 'POST',
                url: "backoffice/MySection/MySectionApi/UploadFileToServer",
                headers: { 'Content-Type': undefined },
                transformRequest: function (data) {
                    var formData = new FormData();
                    formData.append("file", data.file);
                    return formData;
                },
                data: request
            }).then(function (response) {
                if (response) {
                    var fileName = response.data;
                    return fileName;
                } else {
                    return false;
                }
            });
        }
    };
});

To make sure the ng-file-upload-all.js and file.upload.api.service.js are loaded, we need to list them in the package.manifest for our section:

{
javascript: [
    '~/App_Plugins/MySection/backoffice/mySectionTree/edit.controller.js',
    '~/App_Plugins/MySection/mySection.resource.js',
    '~/App_Plugins/MySection/file.upload.api.service.js',
    '~/Scripts/ng-file-upload-all.js'
]}

Next thing is to implement the actual uploading. I put it in my api controller for the section, i.e. MySectionApiController.cs. Add the following method to your MySectionApiController class:

    public async Task<HttpResponseMessage> UploadFileToServer()
    {
        if (!Request.Content.IsMimeMultipartContent())
        {
            throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);
        }

        string uploadFolder = HttpContext.Current.Server.MapPath("~/App_Data/FileUploads");
        Directory.CreateDirectory(uploadFolder);
        var provider = new CustomMultipartFormDataStreamProvider(uploadFolder);
        var result = await Request.Content.ReadAsMultipartAsync(provider);
        var fileName = result.FileData.First().LocalFileName;
        HttpResponseMessage response = Request.CreateResponse(HttpStatusCode.OK);
        response.Content = new StringContent(fileName);
        return response;
    }

To override the generated filename, I also added this class (yes, I know this may have a security impact):

public class CustomMultipartFormDataStreamProvider : MultipartFormDataStreamProvider
{
    public CustomMultipartFormDataStreamProvider(string path) : base(path) { }

    public override string GetLocalFileName(HttpContentHeaders headers)
    {
        return headers.ContentDisposition.FileName.Replace("\"", string.Empty);
    }
}

And that's about it! (Hope I didn't forget anything. If someone tests it and finds that I did, please don't hesitate to let me know!)