AngularJs file Upload Example

AngularJs file Upload Example

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>


ANIL SINGH

Hey! I'm Anil Singh. I author this blog. I'm Active Blogger, Programmer. I love learning new technologies, programming, blogging and participating the forum discussions more...
My Blogs - http://www.code-sample.com and http://www.code-sample.xyz
My Books - Buy Books Online at Best Prices

You Might Also Like
Post a Comment
www.code-sample.com/. Powered by Blogger.