How to display a bootstrap popup box after a file is selected from file browser window?

Question

So, I have a drop-down list that contains a button to import files from the system:

 <input type="file" id="fileSelected" class="upload" data-toggle="modal" value="Import" data-target="#importData"/>

so, when the user selects a file from the file browser and clicks "ok", a bootstrap modal box should show up that displays the details of the file that was selected. Code for the bootstrap popup:

<div class="modal fade" id="importData" data-backdrop="static" tabindex="-1" role="dialog" aria-labelledby="fathomLoginLabel" aria-hidden="true">
    <div class="modal-dialog">
      <div class="modal-content">
        <div id="popupDiv" ng-show="popUp" class="col-sm-12">
             <!--Some more content here-->
        </div>
       </div>
    </div>
</div>

The code to trigger the popup is:

$("#fileSelected").select(function(){
            $scope.showPopUp();
});
 $scope.showPopUp = function(){
        $scope.popUp = true;
        for(var i=0;i<9;++i){
           $timeout(function(){$scope.uploadCompleted += 0.1*($scope.uploadTotal);console.log($scope.uploadCompleted);},4000);
        }
        $scope.checkComplete();
   }

The problem is when i click "ok" on the file browser window, it does not show up the modal popup box. It just fades the background and does nothing.

Answer 1

You can trigger change event of file input. Change event will call when you select file.

Example :

$("#fileSelected").change(function(){
    $(".modal").show();
});