Wednesday, November 26, 2014

AngularJS c# WebApi 2 File Upload

<div>
  <input type="file" id="file"/>
  <button ng-click="uploadClick()">Upload</button>
</div>

angular.module('app')
  .controller('AdminCtrl', ['$scope', '$http',
    function ($scope, $http) {
      $scope.uploadClick = function () {
        var file = document.getElementById('file').files[0];
        var formData = new FormData();
        formData.append('file', file);

        $http.post('/api/images', formData, {
          transformRequest: angular.identity,
          headers: { 'Content-Type': undefined }
        }).then(
          function (result) {
            console.log('Success.', result);
          },
          function (result) {
            console.log('Failed to upload.', result);
          });
      };
    }

  ]);

[RoutePrefix("api/images")]
    public class ImagesController : ApiController
    {
        [Route()]
        public IHttpActionResult PostImage()
        {
            var o = Request.Content.ReadAsMultipartAsync().Result;
            using (var s = o.Contents[0].ReadAsStreamAsync().Result)
            using(var image = Image.FromStream(s))
                image.Save(@"c:\temp\__test.jpg");

            return Ok(new PostImageResult { Id = 0 });
        }
    }

    public class PostImageResult
    {
        public int Id { get; set; }

    }