<html ng-app="app">
  <head>
    <meta charset="utf-8">
    <meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
    
    <title>Open Fileupload Dialog Sample (ionic ver 0.9.26)</title>

    <link href="https://code.ionicframework.com/0.9.26/css/ionic.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="https://code.ionicframework.com/0.9.26/js/ionic.bundle.min.js"></script>
    
    <script src="js/controllers.js"></script>    
  </head>

  <body ng-controller="MainCtrl">
    
    <ion-header-bar title="'Open Fileupload Dialog Sample (ionic ver 0.9.26) '" type="bar-royal"></ion-header-bar>
             
    <ion-content has-header="true">

        <div class="row">
            <div class="col col-100 text-center">
                <div class="text-center">
                    <button class="button icon ion-filing" ng-click="openFileDialog()">openFileDialog</button>
                </div>   
            </div>
        </div>             
        <div class="row">
            <div class="col col-100 text-center">
                <div class="text-center">
                  <div id="filename">{{ fileName }}</div>
                </div>   
            </div>
        </div>             
      <input type="file" id="file"/>
        
    </ion-content>
    
  </body>
</html>
#file {
  display:none;  
}
angular.module('app', ['ionic'])

    .controller('MainCtrl', function($scope) {
        
       $scope.fileName='nothing';
        
        $scope.openFileDialog=function() {
            console.log('fire! $scope.openFileDialog()');
            angular.element('#file').trigger('click');
        };

      
        angular.element('#file').on('change',function(event) {
            console.log('fire! angular#element change event');
           
            var file = event.target.files[0];
            $scope.fileName=file.name;
            $scope.$apply();
        });
   
    });
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.