Как загрузить файл из бэк-офиса umbraco в раздел СМИ?

Question

Я использую пользовательский раздел в umbraco для отображения сообщений, отправленных пользователями. Я хочу, чтобы администраторы могли отвечать на эти сообщения, загружая файл в само сообщение. Таким образом, я буду знать, какой файл принадлежит какому сообщению. Я следовал некоторым руководствам и рекомендациям, в частности, одному из этих разделов, посвященных загрузке файлов из бэк-офиса umbraco.

Однако проблема с моим кодом заключается в том, что он не передает весь файл с запросом на публикацию, а только путь к файлу, который становится примерно таким: C:\fakepath\file.pdf

Мой вопрос будет состоять в том, как мне отправить весь файл в запросе поста и как я могу перехватить / преобразовать файл в HttpPostedFileBase внутри функции API. Если я смогу получить файл как HttpPostedFileBase, я буду знать, как загрузить его в медиа-раздел umbraco.

Код ниже:

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

Если кто-то сталкивается с этой проблемой, вот как мне удалось ее решить:

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;
}

Переменный файл теперь является HttpPostedFile, и вы можете использовать его по своему усмотрению, сохраняя в разделе мультимедиа.

Answer 2

Для тех из вас, кто борется с загрузкой файлов в пользовательские разделы в Umbraco 8, вот мое решение:

Посмотреть:

<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>

Контроллер:

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:

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 }) ;
    }
}