File input control with Upload buttion in AngularJs and WebAPI example

File upload in AngularJs and WebAPI example:

Index.html

<!DOCTYPE html>

<html>

<head>

    <meta name="viewport" content="width=device-width" />

    <title>Index</title>

    <style type="text/css">

        body {

            font-family: Arial;

            font-size: 10pt;

        }

        .thumb {

            width: 24px;

            height: 24px;

            float: none;

            position: relative;

            top: 7px;

        }

        form .progress {

            line-height: 15px;

        }

        .progress {

            display: inline-block;

            width: 100px;

            border: 3px groove #ccc;

        }

        .progress > div {

            font-size: smaller;

            background-color: red;

            width: 0%;

        }

    </style>

</head>

<body>

    <script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/angularjs/1.3.9/angular.min.js"></script>

    <script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/danialfarid-angular-file-upload/12.2.13/ng-file-upload.min.js"></script>

    <script type="text/javascript">

        var app = angular.module('MyApp', ['ngFileUpload'])

        app.controller('MyController', function ($scope, Upload, $timeout) {

            $scope.SelectedFiles;

            $scope.UploadFiles = function (files) {

                $scope.SelectedFiles = files;

            }

            $scope.SaveFiles = function () {

                //$scope.SelectedFiles = files;

                if ($scope.SelectedFiles && $scope.SelectedFiles.length) {

                    Upload.upload({

                        url: '/Home/FileUpload/',

                        data: {

                            files: $scope.SelectedFiles

                        }

                    }).then(function (response) {

                        $timeout(function () {

                            $scope.Result = response.data;

                        });

                    }, function (response) {

                        if (response.status > 0) {

                            var errorMsg = response.status + ': ' + response.data;

                            alert(errorMsg);

                        }

                    }, function (evt) {

                        var element = angular.element(document.querySelector('#dvProgress'));

                        $scope.Progress = Math.min(100, parseInt(100.0 * evt.loaded / evt.total));

                        element.html('<div style="width: ' + $scope.Progress + '%">' + $scope.Progress + '%</div>');

                    });

                }

            };

        });

    </script>

    <div ng-app="MyApp" ng-controller="MyController">

        <input type="file" multiple="multiple" ngf-select="UploadFiles($files)" />

        <input type="button" value="save" ng-click="SaveFiles()"/>

        <hr />

        Files:

        <ul><li ng-repeat="file in SelectedFiles">{{file.name}}</li></ul>

        <div id="dvProgress" class="progress" ng-show="Progress >= 0">

        </div>

    </div>

</body>

</html>

In WebAPI, HomeController

public class HomeController : Controller

    {

        public ActionResult Index()

        {

            return View();

        }

        [HttpPost]

        public ContentResult FileUpload()

        {

            string path = Server.MapPath("~/Uploads/");

            if (!Directory.Exists(path))

            {

                Directory.CreateDirectory(path);

            }

            foreach (string key in Request.Files)

            {

                HttpPostedFileBase postedFile = Request.Files[key];

                postedFile.SaveAs(path + postedFile.FileName);

            }

            return Content("Success");

        }

    }