Open Fileupload Dialog Sample (ionic ver 0.9.27)

In this example below you will see how to do a Open Fileupload Dialog Sample (ionic ver 0.9.27) with some HTML / CSS and Javascript

Thumbnail
This awesome code was written by nobu19711208, you can see more from this user in the personal repository.
You can find the original code on Codepen.io
Copyright nobu19711208 ©

Technologies

  • HTML
  • CSS
  • JavaScript
<!DOCTYPE html>
<html lang="en" >

<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/nobu19711208/open-fileupload-dialog-sample-ionic-ver-0927-AapBh */
#file {
  display:none;  
}

/*Downloaded from https://www.codeseek.co/nobu19711208/open-fileupload-dialog-sample-ionic-ver-0927-AapBh */
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();
        });
   
    });

Comments