<!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>