AngularJS (1.x) example that shows a file preview before upload (image preview, plus filename/size for any file), using CDN for Bootstrap and AngularJS.
Creating our HTML
html
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 |
<!DOCTYPE html> <html > <head> <title>AngularJS File Preview before Upload</title> <meta charset="utf-8"> <link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"> <script src="http://ajax.googleapis.com/ajax/libs/angularjs/1.4.8/angular.min.js"></script> </head> <body ng-app="app" ng-controller="uploader"> <div class="container"> <h1 class="page-header text-center">AngularJS File Preview before Upload</h1> <div class="row"> <div class="col-md-3"> <h3 class="text-center">Upload File</h3> <hr> <label>File:</label> <input type="file" file-input="files"> </div> <div class="col-md-9"> <div ng-show="filepreview"> <img ng-src="{{filepreview}}" height="300px" width="300px"> <h4>Filename: {{ name }}</h4> <h4>Size: {{ size }}</h4> </div> </div> </div> </div> <script src="angular.js"></script> </body> </html> |
Angular.js
JavaScript
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 |
var app = angular.module('app', []); app.directive('fileInput', ['$parse', function ($parse) { return { $scope: { fileinput: "=", filepreview: "=" }, link: function($scope, element, attributes) { element.bind("change", function(changeEvent) { $scope.fileinput = changeEvent.target.files[0]; var reader = new FileReader(); reader.onload = function(loadEvent) { $scope.$apply(function() { $scope.filepreview = loadEvent.target.result; }); } reader.readAsDataURL($scope.fileinput); $scope.name = $scope.fileinput.name; $scope.size = $scope.fileinput.size; }); } } }]); app.controller('uploader', function($scope, $http){ }); |