python ruby-programming-language Smalltalk Vue.js Knockoutjs TypeScript JavaScript, OOPs JavaScript Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 8,7,6,5,4 and 2 Interview Questions and Answers Angular 4 Angular 2 AngularJs 1.x NodeJs Perl Programming R Programming RequireJs Rust Programming Backbonejs closure programming language go-programming-language kotlin-programming-language
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

Hi there! Welcome to my blog. My name is Anil Singh. I'm a author of this blog. For more detail about me, kindly refer to this link..
My Blogs - http://code-sample.com and http://code-sample.xyz
My Books - Interview Questions and Answers Books- Get Your Book in 15+ Digital Stores Worldwide..

You Might Also Like
www.code-sample.com/. Powered by Blogger.
ASK Questions