Selecting Another Html Element From An Ng-click Attribute

I am attempting to pass a file into a function, where the file is originated from an input type of file. My code looks something like this.

<input type="file"id="scvFileUploadId" />

<button id="uploadFilesubmit" onclick="angular.element(this).controller().uploadFile(angular.element(document.querySelector('#csvFileUploadID'))[0].files[0])">Upload</button>

I'm not sure if this solution is the most 'Angular' way of doing it, but there were existing workarounds for some lack of support with Angular input file uploading being done on this part of the application that forced me to interact with DOM, so this does suffice in my scenario.

Solution 2:

I highly recommend using existing directives created by the community;

• https://github.com/nervgh/angular-file-upload
• https://github.com/danialfarid/ng-file-upload

But if you are restricted and want to avoid 3rd parties you can see this implementation:

ng-model for <input type="file"/>

<input type="file" fileread="vm.uploadme" />
<button id="uploadFilesubmit" ng-click"ctrl.uploadFile(vm.uploadme)">Upload</button>

Solution 3:

You can use a simple directive with NgModelController to add ngModel support for the input type='file' like:

angular.module('myApp', [])
.controller('TestUploadController', ['$scope', function ($scope) {
    var ctrl = this;
  
    ctrl.imageFile = null;
    
    ctrl.clearFile = clearFile;
    ctrl.uploadFile = uploadFile;
    
    functionclearFile() {
      ctrl.imageFile = null;
    }
    
    functionuploadFile(file) {
      if (file) {
        console.log('Upload: ', file);
      }
    }
}])
.directive('fileUpload', [function () {
  return {
    require: "ngModel",
    restrict: 'A',
    link: function ($scope, el, attrs, ngModel) {
      functiononChange (event) {
        //update bindings with $applyAsync
        $scope.$applyAsync(function(){
          ngModel.$setViewValue(event.target.files[0]);
        });
      }
      //change event handler
      el.on('change', onChange);
      
      //set up a $watch for the ngModel.$viewValue
      $scope.$watch(function () {
        return ngModel.$viewValue;
      }, function (value) {
        //clear input value if model was clearedif (!value) {
          el.val("");
        }
      });
      //remove change event handler on $destroy
      $scope.$on('$destroy', function(){
        el.off('change', onChange);
      });
    }
  };
}]);

<scriptsrc="//ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script><scriptsrc="//code.angularjs.org/1.6.2/angular.js"></script><divng-app="myApp"><divng-controller="TestUploadController as $ctrl"><inputtype="file"file-uploadng-model="$ctrl.imageFile" /><inputtype="button"ng-click="$ctrl.uploadFile($ctrl.imageFile)"value="Upload" /><inputtype="button"ng-click="$ctrl.clearFile()"value="Reset" /><divng-if="$ctrl.imageFile">
      {{$ctrl.imageFile.name}}<br />
      {{$ctrl.imageFile.size}} byte(s)<br/>
      {{$ctrl.imageFile.type}}
    </div></div></div>