angular1 (Change) not working on multiple file select

Miguel Radaza 0
Viewed 24

I want to call a function from controller whenever the input file selection changed or a user selected a file. but it's not working.

     <input id="selected-images" accept="image/*" type="file" (change)="upload.selectFile($event)" multiple />
  <button id="select-image" class="btn btn-primary-alt " style="border-radius: 8px; padding: 15px 25px;" type="button" onclick="$('#selected-images').click();">Upload from Storage</button>

This is the function selectFile from controller:

        $scope.selectFile = function (event) {
            console.log('awdawdawdawdaw');
            vm.selectedFiles = event.target.files;

              console.log('====================================');
              console.log('this is the selected file from selectFile function');
              console.log(vm.selectedFiles);
              console.log('====================================');
        }
angularjs
1 Answers

Not sure why you nest the selectFile(event) function in an object named upload, but adding the following code in the typescript code of the component definitely gets called and the file list gets logged:

upload = {
    selectFile: (event) => {
      const element = event.currentTarget as HTMLInputElement;
      let fileList: FileList | null = element.files;
      if (fileList) {
        console.log(fileList);
      }
    }
  }

Please also take a look here: file Input Event type in Angular

Fabian Strathaus0
Related