custom dashboard file upload not received in backend

Edo Husakovic 6 posts 97 karma points

Jul 27, 2020 @ 10:19

So I tried following this forum post and this ASP.Net post(Uses AJAX but is essentially the same) for creating my member import.

I managed to call my c# controller and get a response but I can't seem to figure out how to actually receive the file in the UmbracoAuthorizedController.

My JS:

angular.module("umbraco").controller("DashboardMemberImport", function($scope, $element, $http) {
// Get a reference to the file input field
var input = $element[0].querySelector("input[type=file]");

$scope.upload = function() {

    // Ignore if no files has been selected
    if (input.files.length === 0) return;

    // Get the file object
    var file = input.files[0];

    // Use form data to send multipart POST data
    var formData = new FormData();
    formData.append("file", file);

    // This is used to check if the file is written into FormData
    for (var value of formData.values()) {
        console.log(value);
    }

    // Upload the file using $http
    $http({
        method: "POST",
        url: "/umbraco/backoffice/MemberImport/UploadFiles",
        headers: { "Content-Type": undefined },
        transformRequest: angular.identity,
        data: formData
    }).then(function() {
        alert("success")
    }, function() {
        alert("error")
    });
};
});

My c#:

[HttpPost]
public ActionResult UploadFiles()
{
    throw new Exception(Request.Files.Count.ToString());
}

The controller always returns file count 0 although the console says that there is a file in FormData. enter image description here

In general I am quite confused on how the Request.Files actually works and what I am missing.

Any help would be greatly appreciated :))

Umbraco version: 8.6.2

Copy Link

Ismail Mayat 4511 posts 10092 karma points MVP 2x admin c-trib

Jul 28, 2020 @ 13:24

I have something working in 7.15.4 looks almost exactly the same as your code. Only thing I have different is in the .net controller when I get the file I have:

 var file = HttpContext.Current.Request.Files["file"];

Shouldn't make a different though.

Regards

Ismail

Copy Link

Edo Husakovic 6 posts 97 karma points

Jul 28, 2020 @ 13:35

Thanks for your response Ismail

I already tried this and I just tried it again for good measure.

Sadly still nothing.

[HttpPost]
public ActionResult UploadFiles()
{
     var test = Request.Files["file"];
     throw new Exception(test.FileName);
}

enter image description here

Copy Link

Kevin Jump 2342 posts 14889 karma points MVP 8x c-trib

Jul 29, 2020 @ 15:17

Hi

I have a working example for v8.

https://github.com/KevinJump/DoStuffWithUmbraco/tree/master/Src/DoStuff.Core/FileUpload (also in the bottom of that main thread)

It uses the ngf-file-upload library - which comes as part of Umbraco 8

the main thing i end up having to add is the CustomMultipartStreamProvider - which handles the file being part of the request alongside other things.

Copy Link

Edo Husakovic 6 posts 97 karma points

Aug 10, 2020 @ 07:35

Thank you Kevin

Your code is exactly what i was looking for. I needed some time to figure it out but now it works perfectly.

I cleaned the code up a little and I really hope this helps someone out. :)

I haven't tested multiple file upload so I'm not sure how you would do it but I'm assuming you could use something similair to how to the extra fields are sent.

HTML:

<div ng-controller="dashboardMemberImportController as vm">
    <input id="dostufffilepicker" type="file" ngf-select ngf-model="filesHolder" ngf-change="vm.handleFiles($files, $event)" ngf-multipart="true" />
    <button ng-click="vm.upload(vm.file)">upload</button>
</div>

JS:

(function() {
    function dashboardController($scope,
        Upload) {
        var vm = this;

        vm.handleFiles = handleFiles;
        vm.upload = upload;

        function upload(file) {
            Upload.upload({
                url: "/Umbraco/backoffice/api/MemberImport/UploadFile",
                fields: {

                    //These are additional fields you can send and use as FormData
                    'overwrite': "false",
                    'sendEmail': "true"
                },
                file: file
            }).success(function(data, status, headers, config) {
                alert (data);
            }).error(function(data, status, headers, config) {
                alert(data);
            });
        }

        function handleFiles(files, event) {
            if (files && files.length > 0) {
                vm.file = files[0];
            }
        }
    }
    angular.module('umbraco')
        .controller('dashboardMemberImportController', dashboardController);
})();

C#:

public class MemberImportController : UmbracoAuthorizedApiController
{
    [HttpPost]
    public async Task<string> UploadFile()
    {
        try
        {
            if (!Request.Content.IsMimeMultipartContent())
                throw new HttpResponseException(HttpStatusCode.UnsupportedMediaType);

            //This is the path where the file will be saved
            var uploadFolder = IOHelper.MapPath("~/ENDU/memberImport/");
            Directory.CreateDirectory(uploadFolder);

            var provider = new CustomMultipartFormDataStreamProvider(uploadFolder);
            var result = await Request.Content.ReadAsMultipartAsync(provider);
            //filename is path to file
            var filename = result.FileData.First().LocalFileName;

            //This is how to get the values of the extra fields we defined in the JS
            var overwrite = result.FormData["overwrite"];
            var sendEmail = result.FormData["sendEmail"];

            if (filename == null)
                throw new HttpResponseException(HttpStatusCode.NoContent);

            //This is how we get the filestream since filename is the path to the file
            FileStream fs = new FileStream(filename, FileMode.Open, FileAccess.Read);

            return "success";
        }
        catch
        {
            return "file error";
        }
    }

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

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

Copy Link

is working on a reply...

Flag this post as spam?

Custom dashboard file Upload not received in backend