How to upload file from umbraco backoffice to media section?

Question

I am using a custom section within umbraco for displaying messages sent by users. I want the admins to be able to answer these messages by uploading a file to the message itself. This way I will know which file belongs to which message. I have followed some guides and recommendations most notably this one file-upload-in-backoffice-custom-section on how to upload files from umbraco backoffice.

Problem with my code however is that it does not seem to send the whole file with the post request just the path of the file which becomes something similar to: C:\fakepath\file.pdf

My question would be how do I send the whole file in the post request and how can i catch/convert the file into an HttpPostedFileBase inside of the API function. If I can get the file as HttpPostedFileBase I will know how to upload it to the media section of umbraco.

Code below:

edit.html:

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

    <umb-editor-footer>
        <umb-editor-footer-content-right>
            <div class="umb-button ng-scope">           
                <button ng-click="OnSave()" class="btn umb-button__button btn-success umb-button--">
                    <span class="umb-button__content">
                        Save
                    </span>
                </button>
            </div>
        </umb-editor-footer-content-right>
    </umb-editor-footer>

edit.controller.js:

$scope.fileSelected = function (files) {
        $scope.file = files;
    };


    $scope.OnSave = function () {
            var request = {
                file: $scope.file
            };
            return $http({
                method: 'POST',
                url: "backoffice/Messages/MessagesApi/PostSaveFile",
                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;
                }
            });

    };

MessagesApiController.cs:

public HttpResponseMessage PostSaveFile(HttpPostedFileBase file)
{
    var files = HttpContext.Current.Request;

    if (files != null && files.ContentLength > 0)
    {
        StreamReader reader = new StreamReader(files.InputStream);
        string responseFromServer = reader.ReadToEnd();
    }
    return Request.CreateResponse(HttpStatusCode.OK);
}

Answer 1

For those of you who are struggling with file uploads in custom sections in Umbraco 8 here's my solution:

View:

<input type="file" class="umb-textstring" ngf-select="" ng-model="files" ng-multiple="false" ngf-change="fileSelected(files)" required />
<umb-button action="vm.clickUploadButton()"
            type="button"
            button-style="info"
            label="Upload">
</umb-button>

Controller:

function Controller($scope, Upload) {
    var vm = this;
    vm.clickUploadButton = clickUploadButton;

    $scope.fileSelected = function (files) {
        $scope.file = files;
    };

    function clickUploadButton() {
        if (!$scope.file)
            return false;

        Upload.upload({
            url: "backoffice/api/Upload/UploadFile",
            fields: {
                "field1": "value1",
                "field2": "value2"
            },
            file: $scope.file
        }).success(function (data, status, headers, config) {
            console.log(status);
            console.log(data);
        }).error(function (evt, status, headers, config) {
            console.log(evt.Message);
        });
    }
}

API controller:

public class UploadController : UmbracoAuthorizedApiController
{
    [HttpPost]
    public HttpResponseMessage UploadFile()
    {
        var files = HttpContext.Current.Request.Files;
        var field1 = HttpContext.Current.Request.Form["field1"];
        var field2 = HttpContext.Current.Request.Form["field2"];

        return Request.CreateResponse(HttpStatusCode.OK, new { fileCount = files.Count, field1, field2 }) ;
    }
}

Answer 2

If anyone is stumbling accross this issue this is how I managed to solve it:

edit.html:

<umb-control-group label="Response File" description="File to upload">
      <input type="file" id="myFile" ng-multiple="false" />
</umb-control-group>

edit.controller.js:

 if ($element.find('#myFile')[0].files[0] !== undefined) {
                var fd = new FormData();
                fd.append('file', $element.find('#myFile')[0].files[0]);
                $http.post("backoffice/Messages/MessagesApi/PostSaveFile", fd, {
                    transformRequest: angular.identity,
                    headers: { 'Content-Type': undefined }
                }).success(function (response) {
                    console.log(response);
                });
            }

MessagesApiController.cs:

public string PostSaveFile()
{
    var file = HttpContext.Current.Request.Files["file"];
    return file.FileName;
}

Variable file is now an HttpPostedFile and you can use it for whatever you want like saving it into the media section.