Hello everyone, I am going to share the code sample for how to upload file using angularjs.
The live demo plunker code http://embed.plnkr.co/5bm1zQ/preview
The Angular example code as given below.
var app = angular.module('myApp', ['angularFileUpload']);
app.controller('mycontroller', function ($scope) {
$scope.onSelectFile = function ($files) {
for (var i = 0; i < $files.length; i++) {
var $file = $files[i];
$upload.upload({
url: 'api/HomeControler/upload',
file: $file,
progress: function (e) {
// wait...
}
})
.then(function (data, status, headers, config) {
alert('file is uploaded successfully');
});
}
}
};
The Full live code Angular +HTML both as given below.
<!DOCTYPE html>
<html ng-app="myApp">
<head>
<meta charset="utf-8" />
<title>How to upload file in angularjs</title>
<script src="http://code.angularjs.org/1.2.14/angular.js" data-semver="1.2.14"></script>
<script>
var app = angular.module('myApp', ['angularFileUpload']);
app.controller('mycontroller', function ($scope) {
$scope.onSelectFile = function ($files) {
for (var i = 0; i < $files.length; i++) {
var $file = $files[i];
$upload.upload({
url: 'api/HomeControler/upload',
file: $file,
progress: function (e) {
// wait...
}
})
.then(function (data, status, headers, config) {
alert('file is uploaded successfully');
});
}
}
};
</script>
</head>
<body>
<div ng-controller="mycontroller">
<input type="file" ng-file-select="onSelectFile($files)" multiple>
</div>
</body>
</html>
The output go to link http://embed.plnkr.co/5bm1zQ/preview
For more detail go to link https://egghead.io/lessons/angularjs-file-uploads
For more detail go to link https://egghead.io/lessons/angularjs-file-uploads
|
Anil Singh is an author, tech blogger, and software programmer. Book writing, tech blogging is something do extra and Anil love doing it. For more detail, kindly refer to this link..
|