Hello All

I am trying to upload image from umbraco backoffice custom section, but unable to do so, below is my code

HTML

<input id="file" type="file" accept="images/*" class="form-control" multiple ng-files="getTheFiles($files)" />

<a ng-click="Submit()" class="btn btn-primary btn-block">Add Deal</a>

JS

angular.module('umbraco')
.directive('ngFiles', ['$parse', function ($parse) {

    function fn_link(scope, element, attrs) {

        var onChange = $parse(attrs.ngFiles);

        element.on('change', function (event) {
            onChange(scope, { $files: event.target.files });
        });
        element.on('dragover', function (e) {
            e.preventDefault();
            e.stopPropagation();
        });
        element.on('dragenter', function (e) {
            e.preventDefault();
            e.stopPropagation();
        });
        element.on('drop', function (e) {
            e.preventDefault();
            e.stopPropagation();
            if (e.originalEvent.dataTransfer) {
                if (e.originalEvent.dataTransfer.files.length > 0) {
                    //upload(e.originalEvent.dataTransfer.files);
                    onChange(scope, { $files: e.originalEvent.dataTransfer.files });
                }
            }
            return false;
        });

    };

    return {
        link: fn_link
    }
}])

Controller

angular.module("umbraco").controller("myController", function ($http, 
$scope, AddDealService) {
$scope.getTheFiles = function ($files) {

    $scope.imagesrc = [];

    for (var i = 0; i < $files.length; i++) {

        var reader = new FileReader();
        reader.fileName = $files[i].name;

        reader.onload = function (event) {

            var image = {};
            image.Name = event.target.fileName;
            image.Size = (event.total / 1024).toFixed(2);
            image.Src = event.target.result;
            $scope.imagesrc.push(image);
            $scope.$apply();
        }
        reader.readAsDataURL($files[i]);
    }

    $scope.Files = $files;

};
//Add File End...

// Submit Forn data
$scope.Submit = function () {


    //FILL FormData WITH FILE DETAILS.
    var data = new FormData();

    angular.forEach($scope.Files, function (value, key) {
        data.append(key, value);
    });

    data.append("DealModel", angular.toJson($scope.DealDetail));
    AddDealService.AddDeal(data).then(function (response) {
        alert("Added Successfully");
    }, function () {

    });
};});


     angular.module('umbraco').factory('AddDealService', ['$http', function 
($http) {

var fac = {};

fac.AddDeal = function (data) {
    return $http.post("/umbraco/api/MemberAPI/UploadFileToServer", data, {
        withCredentials: true,
        headers: { 'Content-Type': undefined },
        transformRequest: angular.identity
    })
}

return fac;
}])

and in C#

public class MemberAPIController : UmbracoApiController
{
 [HttpPost]
    public bool UploadFileToServer()
    {
        var files = HttpContext.Current.Request.Files;
        var v = files.Count;
        return true;
    }
}

The same code is working fine in case of normal MVC API Controller but not working in umbracoApiController, What i am doing wrong??

Is there any other way to upload files in umbraco 8 custom section