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>