Input file click event does not wait for file selection on chrome

Question

I take a code that works very well on IE and testing on Chrome, I see that the browser does not wait until the user has chosen his file before continuing to execute the code.

HTML :

<input type="file" accept=".jpg" id="flNewDoc" name="flNewDoc" 
       style="display:none" />
<input ng-model="vm.currentPiece.OriginalName" type="text" id="txtNewFile" 
       readonly />
<button type="button" ng-click="vm.openFileDialog()">
    <i class="fa fa-folder-open-o"></i>
</button>

AngularJS controller :

vm.openFileDialog = function () {
    var element = angular.element('#flNewDoc');
    element.trigger('click');
    console.log("click triggered");
    vm.newFile = element[0].files[0];
    vm.newFileName = element[0].value;
    vm.uploadFile();
    console.log("file upload ended");
};
vm.uploadFile = function () {
    if (vm.newFile) {
        vm.currentPiece = {
            isNew: true,
            isToDelete: false,
            isLoading: true,
        };
        dataSrv.uploadReunionDocument(vm.newFile).then(function (resp) {
            Object.assign(vm.currentPiece, resp.data)
            vm.currentPiece.isLoading = false;
            vm.newFile = undefined;
            vm.newFileName = '';
        }, function (error) {
            vm.currentPiece.isLoading = false;
            console.log(error);
        });
    }
};

With IE my code block is paused on the line element.trigger('click') The user can therefore select his file and the download starts directly (client request). While in chrome, we see the selection window open, but the code continues without pausing

How can I adapt my code so that it works as expected on both browsers?

Read [How to enable `` to work with ng-model](https://stackoverflow.com/questions/17063000/ng-model-for-input-type-file-with-directive-demo/43074638#43074638). — georgeawg, Mar 12 '20 at 13:04

score 0 · Answer 1 · answered Mar 12 '20 at 12:13

You should define the part using the selected file in a change handler since the file selection has to trigger such an hanlder.

angular.module('myApp', [])
  .controller("MyCtrl", function() {
    const vm = this;


    vm.openFileDialog = function() {
      element.trigger('click');
      console.log("click triggered");
    };
    vm.uploadFile = function() {
      if (vm.newFile) {
        vm.currentPiece = {
          isNew: true,
          isToDelete: false,
          isLoading: true,
        };
        console.log('dataSrv.uploadReunionDocument')
        /*
        dataSrv.uploadReunionDocument(vm.newFile).then(function(resp) {
          Object.assign(vm.currentPiece, resp.data)
          vm.currentPiece.isLoading = false;
          vm.newFile = undefined;
          vm.newFileName = '';
        }, function(error) {
          vm.currentPiece.isLoading = false;
          console.log(error);
        });
        */
      }
    };



    var element = angular.element('#flNewDoc');
    element.on('change', function() {
      vm.newFile = element[0].files[0];
      vm.newFileName = element[0].value;
      vm.uploadFile();
      console.log("file upload ended");
    })
  })

<style src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/css/all.min.css"></style>.
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.7.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.12.1/js/all.min.js"></script>

<div ng-app="myApp" ng-controller="MyCtrl as vm">

  <input type="file" accept=".jpg" id="flNewDoc" name="flNewDoc" style="display:none" />
  <input ng-model="vm.currentPiece.OriginalName" type="text" id="txtNewFile" readonly />
  <button type="button" ng-click="vm.openFileDialog()"><i class="fa fa-folder-open-o"></i></button>

</div>

Input file click event does not wait for file selection on chrome

1 Answers1