<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
  <meta charset="UTF-8">
  <title>Angular Base64 Upload Demo</title>
  <script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/angularjs/1.3.0-beta.18/angular.min.js"></script>
  <script type="text/javascript" src="angular-base64-upload.js"></script>
  <script type="text/javascript">
    angular.module('myApp', ['naif.base64']).controller('ctrl', function($scope, $http, $window){

      $scope.uploadFile = function(){
        $http.post('server.php', $scope.image)
        .success(function(res){
          alert('View file '+res+'  ?');
          $window.location.assign(res);
        })
      }
    })
  </script>
</head>
<body ng-controller="ctrl">
  <form>
    <label for="file">Select Image</label>
    <input type="file" ng-model="image" name="file" base-sixty-four-input>
    <button type="submit" ng-click="uploadFile()">Submit</button>
  </form>
  <br>Image preview: <br>
  <img base-sixty-four-image="image" base-sixty-four-image-placeholder="placeholder.png" alt="">
  <h2>File Info</h2>
  <p>
    <b>File Name: </b> {{image.filename}}
  </p>
  <p>
    <b>File type: </b> {{image.filetype}}
  </p>
  <p>
    <b>File Size: </b> {{image.filesize}} bytes
  </p>
  <p>
    <b>Base 64 encoded: </b>
    <p>
      <textarea name="" id="" cols="30" rows="10">
        {{image.base64}}
      </textarea>
    </p>
  </p>
</body>
</html>
