CODEWITHSUNDEEP
c#angularjsasp.net-web-apiuploadtypescript
Wesley
Wesley

Reputation: 417

Upload to WebApi in AngularJS + Typescript (ng-file-upload)

I'm starting with AngularJS and typescript, and I'm trying to make a form upload that communicates with a page on WebAPI. But still I can not understand the Angle of syntax and how the directives and controllers.

I see many examples using AngularJS with pure Javascript, but can not convert the javascript code to typescript. I am using the ng-file-upload library. I'm a noob :(

HTML:

<html>
<body>
  <form action="#" method="post" ng-submit="vm.send($event)" class="">
     <p>
        <label>Name</label>
        <input type="text"
           name="Name"
           required="required"
           ng-model="vm.Name"/>
     </p>
     <p>
        <label>Image:</label>
        <input type="file"
           ngf-select name="file"    
           accept="image/*" ngf-max-size="2MB"
           ng-model="vm.Image"/>
     </p>
     <p ng-show="vm.Image">
        <label>Preview:</label>
        <img ngf-thumbnail="vm.Image" class="thumb"><button ng-click="vm.Image = null" ng-show="vm.Image">Remove</button>
     </p>
     <p>
        <button type="reset" ng-click="vm.quit()">Quit</button>
        <button>Send</button>
     </p>
  </form>
</body>
</html>

Typescript:

module MyFramework.Controllers.upload {
    export class UploadController {
        public vm: any;
        public window: any;

        public static $inject = ["framework", "$http", "$scope", "Upload", "$timeout"];
        constructor(framework, private $http, private $scope, private $Upload, private $timeout) {}

        send(event) {
            event.preventDefault();
            this.$http.post("api/upload", this.vm)
                .success((message) => {
                    alert("Ok");;
                })
                .error((message) => {
                    alert("Error: " + message);
                });
            this.$scope.uploadPic = function (file) {
                file.upload = Upload.upload({
                    url: 'api/upload',
                    data: { name: this.vm.Name, image: this.vm.Image }
                });

                file.upload.then(function (response) {
                    this.$timeout(function () {
                        file.result = response.data;
                    });
                },
                    function (response) {
                        if (response.status > 0)
                            this.$scope.errorMsg = response.status + ': ' + response.data;
                    });
            });
        }

        quit() {
            //quit window funtion
        }
    }
}

My function in CS#-WebApi to receive the file:

[HttpPost]
public string Post(string Name, Byte[] Image)
{
    //save the file in database
}

I wanted to try to make the angular file arrives in WebAPI the controller, and there treat it as a Byte [], but I can not. What am I doing wrong? Thank you all.

Upvotes: 1

Views: 1548

Answers (1)

Luca Ghersi
Luca Ghersi

Reputation: 3321

You're trying to post an object

this.$http.post("api/upload", this.vm)

but your API is expecting two values 

Post(string Name, Byte[] Image)

Try changing you API to get an object with two parameters, like this:

public class MyViewModel
{
   public string Name {get;set;}
   public byte[] File {get;set;}
}

[HttpPost]
public string Post(MyViewModel vm)
{
    //save the file in database
}

Upvotes: 2

Related Questions