Did you solve this?

Hi Rune

Yeh I did in the end, not sure if is was the most elegant solution. Do you want me to post what I did?

I did this in case anyone else needs it in the HTML:

<label for="driverAdd.DriverImage" style="display: inherit">Driver's Picture</label>
                                            <input type="file" id="driverAdd.DriverImage" name="file" onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/*" />
<button class="btn publish" ng-click="addDriver(driverAdd)">Create</button>

In my JS controller:

$scope.post = "/umbraco/Surface/DriverSurface/CreateDriver";
$scope.files = [];
$scope.LoadFileData = function (files) {
    $scope.files = files;
};
$scope.addDriver = function (driver) {

    $http({
        url: $scope.post,
        method: "POST",
        headers: { "Content-Type": undefined },
        transformRequest: function (data) {
            var formData = new FormData();
            formData.append("driverDetail", angular.toJson(driver));
            for (var i = 0; i < data.files.length; i++) {
                formData.append("files[" + i + "]", data.files[i]);
            }
            return formData;
        },
        data: { driverDetail: driver, files: $scope.files}
    })
    .success(function (response) {
        };
        $scope.statusMsg = "Driver Added";
    });
};

Then in my SurfaceController to get the HttpPostedFileBase I did this:

     [System.Web.Http.HttpPost]
    public ActionResult CreateDriver(string driverDetail, HttpPostedFileBase[] files)
    {}

Like i say not sure if there is a more elegant way of doing this but it sure works Ok for me :)

Thanks Neil. I found another solution that was much more complicated, but still works pretty good. It ended up being very specific for my solution, so I cannot really post code unless i clean it up good and I haven't got the time right now. Your's looks nice and simple to work with.

/Rune

Hi Neil, I'm trying to replicate your code in my custom package, but it doesn't work.

I have a custom section with a custom tree. The first voice of the tree allows users to upload an image in my custom directory in "~/Media" directory on file system

Below you can find view, controller, resource and c# code.

Can you help me to understand where is the problem and how to solve it?

Thank you

Adriano

The View:

(No problem on rendering file upload fields)

    <div class="file-uploader">
        <label for="vm.bkgImage">Select an image</label>
        <input type="file" id="vm.bkgImage" name="file" ng-model="vm.bkgImage" onchange="angular.element(this).scope().LoadFileData(this.files)" accept="image/jpg, image/png" />
         <button class="btn publish" ng-click="vm.addBkgImage(vm.bkgImage)">Upload</button>
    </div>

The Controller:

(No problems on file selection)

    vm.bkgImage = [];
    var allFiles = [];
    var file = [];

    $scope.LoadFileData = function (files) {
        file = files[0];
        allFiles = files;
    };

    vm.addBkgImage = function (bkgImage) {
        afclpResource.postUploadImage(file, allFiles).then(function (response) {
            if (response.data !== "null") {
                notificationsService.add(vm.uploadSuccessNotification);
            }
            else {
                notificationsService.add(vm.uploadErrorNotification);
                vm.showDeletePanel = false;
            }
        });
    };

The Resource

(Here I receive a "500 - Internal Server Error" after click the "upload" button. The action stops and don't reach c# code)

    postUploadImage: function (file, allFiles) {
        return $http({
            method: "POST",
            url: 'AFCLP/AFCLPResourceApi/PostAFCLPUploadImage',
            headers: { "Content-Type": "undefined" },
            transformRequest: function (data) {
                var formData = new FormData();
                formData.append("file", angular.toJson(file.name));
                for (var i = 0; i < allFiles.length; i++) {
                    formData.append("files[" + i + "]", allFiles[i]);
                }
                console.log(formData);
                console.log(data);
                return formData;
            },
            data: { file, allFiles }
        });
    }

The C# method

    /// <summary>
    /// Post - Upload Image
    /// </summary>
    /// <returns></returns>
    [HttpPost]
    public bool PostAFCLPUploadImage(HttpPostedFileBase file, HttpPostedFileBase[] files)
    {
        string afclpMediaPath = HttpContext.Current.Server.MapPath(SystemDirectories.Media + "/AFCLP/backgrounds");

        try
        {
            // HERE WILL BE THE UPLOAD CODE

            return true;
        }
        catch (Exception ex)
        {
            LogHelper.Error<Exception>(ex.Message, ex);

            return false;
        }
    }

Hi

Were you able to put a breakpoint onto your method PostAFCLPUploadImage?

Does the code execute that far?

If not it could be a path problem where the Ajax is not hitting your method? Although I would of thought that should return a 404 error if it can't find it.

I can only think it's maybe down to the routing in Umbraco? In my version i'm using a SurfaceController and an ActionResult type of Method.

Maybe try creating one in a SurfaceController of type ActionResult and see if it hits that with the HttpPostedFileBase

That's really Odd.

I've created a custom dashboard and within one of the views im using this method and it hits my code Ok.

Could you maybe try just passing one parameter - allFiles and see if it hits it Ok then?

Hi Neil, watching the header, when start upload, I found this exception message:

No MediaTypeFormatter is available to read an object of type 'HttpPostedFile' with media type "multipart/form-data"

Any Idea? :-o

I tried to modify the code as below and finally I arrive on my POST method. The problem now is that for some reason the request.FileData is empty (no file)

The View:

<div class="file-uploader">
    <form id="afclpUploadForm" name="afclpUploadForm" role="form" class="form-inline">
        <label for="file">Select an image</label>
        <input type="file" ng-model="picFile" name="file" ngf-change="fileSelected(this)" ngf-accept="'image/jpg, image/png'" />
        <button ng-click="saveBkgImage(picFile)" class="btn publish">Upload</button>
    </form>
</div>

The Controller:

$scope.picFile = [];
$scope.files = [];

$scope.fileSelected = function (element) {
    //add the file object to the scope's files collection
    $scope.files.push(element.picFile);
};

//the save method
$scope.saveBkgImage = function (picFile) {
    afclpResource.postUploadImage($scope, picFile).then(function (response) {
        if (response.data !== "null") {
            notificationsService.add($scope.uploadSuccessNotification);
        }
        else {
            notificationsService.add($scope.uploadErrorNotification);
            $scope.showDeletePanel = false;
        }
    });
};

The Resource

postUploadImage: function (file, allFiles) {
    return $http({
        method: "POST",
        url: 'AFCLP/AFCLPResourceApi/PostAFCLPUploadImage',
        headers: { 'Content-Type': undefined },
        transformRequest: function (data) {
            var formData = new FormData();
            formData.append("model", angular.toJson(data.model));
            for (var i = 0; i < data.files.lenght; i++) {
                formData.append("file" + i, data.files[i]);
            }

            return formData;
        },
        data: { model: model, files: file }
    });
}

The C# method

/// <summary>
/// Post - Upload Image
/// </summary>
/// <returns></returns>
[HttpPost]
public async Task<HttpResponseMessage> PostAFCLPUploadImage()
{
    try
    {
        // Save File
        if (!Request.Content.IsMimeMultipartContent())
        {
            LogHelper.Error<HttpResponseException>(HttpStatusCode.UnsupportedMediaType.ToString(), new HttpResponseException(HttpStatusCode.UnsupportedMediaType));
            return Request.CreateResponse(HttpStatusCode.UnsupportedMediaType, new HttpResponseException(HttpStatusCode.UnsupportedMediaType));
        }

        //Directory.CreateDirectory(afclpMediaPath);
        var provider = new MultipartFormDataStreamProvider(afclpMediaPath);
        var result = await Request.Content.ReadAsMultipartAsync(provider);

        if (result.FormData["model"] == null)
        {
            LogHelper.Error<HttpResponseException>(HttpStatusCode.BadRequest.ToString(), new HttpResponseException(HttpStatusCode.BadRequest));
            return Request.CreateResponse(HttpStatusCode.BadRequest, new HttpResponseException(HttpStatusCode.BadRequest));
        }

        var model = result.FormData["model"];

        if (result.FileData.Count() > 0)
        {
            //Get the files
            foreach (var file in result.FileData)
            {
                //Save each uploaded file

            }
        }

        return Request.CreateResponse(HttpStatusCode.OK, "Success!");

        //LogHelper.Error<HttpResponseException>("Error! (" + HttpStatusCode.InternalServerError + ") FileData Empty", new HttpResponseException(HttpStatusCode.InternalServerError));
        //throw new HttpResponseException(Request.CreateResponse(HttpStatusCode.InternalServerError, "Error! FileData Empty"));
    }
    catch (HttpResponseException ex)
    {
        LogHelper.Error<HttpResponseException>("Error! (" + HttpStatusCode.InternalServerError + ") " + ex.Message, ex);
        return Request.CreateResponse(HttpStatusCode.InternalServerError, ex.Message);
    }
}

is working on a reply...