File upload with onchange event

Question

I am working on file upload with on change event.Getting an error file is not defined.

   //html file
   <input type="file" style="display: none;" onchange="angular.element(this).scope().uploadedFile(this)"> 

   //controller file
   $scope.file={};
   $scope.uploadedFile=function(event,args){
   $scope.files=[];
   $scope.$apply(function () {      
        $scope.files.push(args.file);     
        $scope.file=$scope.files[0];
        $scope.load(args.contents);
    });
  });

Answer 1

Angular doesn't seem to support binding for <input type="file"..../>. It seems like you have to create a directive... full details here. You can also try this library

AngularJs: How to check for changes in file input fields?

please refer a file upload libary: https://github.com/danialfarid/ng-file-upload

Answer 2

sample Html code using onchnage Function

<input type="file" id="f" accept=".txt,.csv,.jmx " multiple="" onchange="angular.element(this).scope().getFileDetails(this);this.value=null;">

javsacript Code get File Data

 $scope.files = [];
      $scope.getFileDetails = function(e) {
        $scope.$apply(function() {
          for (var i = 0; i < e.files.length; i++) {
            var isFileAvailable = false;
            console.log("File Name  " + e.files[i].name);
            for (var j = 0; j < $scope.files.length; j++) {
              if ($scope.files[j].name === e.files[i].name) {
                isFileAvailable = true;
                break;
              }
            }
            if (!isFileAvailable) {
              $scope.files.push(e.files[i]);
            } else {
              alert("file is already available ::" + e.files[i].name)
            }
          }
        });
      }

@refer link :https://stackoverflow.com/a/46708678/7256477

Answer 3

1. You don't need to pass event to uploadedFile function.
2. It should be args.files not args.file.

//html file

     <input type="file" style="display: none;" onchange="angular.element(this).scope().uploadedFile(this)"> 

//controller file

  $scope.file={};
  $scope.uploadedFile=function(args){
  $scope.files=[];
  $scope.$apply(function () {      
    $scope.files.push(args.files);     
    $scope.file=$scope.files[0];
    $scope.load(args.contents);
});

});