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

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..

My Tech Blog - https://www.code-sample.com/
My Books - Book 1 and Book 2

www.code-sample.com/. Powered by Blogger.
^