Open Fileupload Dialog Sample (ionic ver 0.9.27)

Tutorials of (Open fileupload dialog sample (ionic ver 0.9.27)) by Nobu19711208

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>Open Fileupload Dialog Sample (ionic ver 0.9.27)</title>
  
  
  
      <link rel="stylesheet" href="css/style.css">

  
</head>

<body>
  <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.27)</title>

    <link href="https://code.ionicframework.com/0.9.27/css/ionic.min.css" rel="stylesheet"/>
    <script src="https://code.jquery.com/jquery-latest.js"></script>
    <script src="https://code.ionicframework.com/0.9.27/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.27) " 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>
  
    <script  src="js/index.js"></script>

</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#file {
  display:none;  
}
/* Downloaded from https://www.codeseek.co/ */
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();
        });
   
    });

This awesome code ( Open Fileupload Dialog Sample (ionic ver 0.9.27) ) is write by nobu19711208, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © nobu19711208