file upload in angularjs

Question

I am new to angularjs and trying to implement simple file upload but I am fetting file as undefined while trying to access it from controller

articles.html

<section data-ng-controller="ArticlesController" data-ng-init="find()">
    <div class="page-header">
    </div>
    <div >
        <input type="file" file-model="myFile"/>
        <button ng-click="uploadFile()">upload me</button>
    </div>
</section>

following is my controller where I am trying to access file object

angular.module('articles').controller('ArticlesController', ['$scope', '$stateParams', '$location','Authentication', 'Articles',
    function($scope, $stateParams, $location, Authentication, Articles) {
        $scope.authentication = Authentication;

        $scope.uploadFile = function() {
            console.log('came here');
            var file = $scope.myFile;
        console.log('file is ' + file);

        };
}
]);

Edit:

I tried using https://github.com/ghostbar/angular-file-model and working on meanjs boiler plate code

One of the step is to include angular-file-model.js in html page. Add to your HTML files:

in which file do I include and how do I include the angular-file-model.js file.

score 0 · Accepted Answer · edited May 23 '17 at 10:29

0

It is not as simple to use file Input with Angular. You need to use external libs as those quoted here.

I personally used BlueImp FileUpload : https://blueimp.github.io/jQuery-File-Upload/angularjs.html

edited May 23 '17 at 10:29

Community

1
1

answered Dec 22 '14 at 14:20

yunandtidus

3,847
3
29
42

score 0 · Answer 2 · answered Dec 22 '14 at 14:28

It seems you are using Angular-file-Model

They also have Plunker, and that's working perfectly fine. Have you followed all the steps they mentioned in the git? Check if you injected the file-model dependency in your main module like :

 angular.module('articles', ['file-model']);

score 0 · Answer 3 · answered Dec 22 '14 at 14:29

0

I've used Danial Farid's Angular File Upload on several occasions and had great success.

https://github.com/danialfarid/angular-file-upload

answered Dec 22 '14 at 14:29

Rob

1,840
2
12
19

score 0 · Answer 4 · edited Mar 22 '17 at 04:35

angular.module('myApp').directive('fileModel', ['$window',function ($window) {
    return {
       restrict: 'A',
       require:'ngModel',
       link: function(scope, element, attrs,ngModel) {
          element.bind('change', function(){
              scope.$apply(function(){
                  var r = new FileReader();
                  r.onloadend = function(){
                      var svg = r.result;
                      ngModel.$setViewValue($window.btoa(svg));
                    ngModel.$render();
                  };
                  var file = element[0].files[0];
                  if(file !== undefined){
                      if(file.type === 'image/svg+xml' || file.type === 'image/svg'){
                          ngModel.$setValidity('svgimage', true);
                          r.readAsDataURL(file);

                      }else{
                          ngModel.$setValidity('svgimage', false);
                          ngModel.$setViewValue(' ');
                          ngModel.$render();

                      }
                var value = element[0].value ; 
                          value = value.substr(value.lastIndexOf('\\') + 1,value.length);
                          document.getElementById('fileurl').value = value;
                          document.getElementById('fileurl').title = value;
                  }

             });
          });
       }
    };
}]);

<input ng-model="icon.icon" file-model class="form-control upload" type="file"  required/>

file upload in angularjs

4 Answers4