File Preview before Upload in AngularJS

Projects Inventory

1 day ago

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

<!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="https://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>

<!DOCTYPE html>

<html >

<head>

<title>AngularJS File Preview before Upload</title>

</head>

<h1 class="page-header text-center">AngularJS File Preview before Upload</h1>

<h3 class="text-center">Upload File</h3>

<hr>

</div>

<h4>Filename: {{ name }}</h4>

</div>

</body>

</html>

Angular.js

JavaScript

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){
 
});

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){

});

Download Code of Angular Preview

Creating our HTML

Angular.js

Related Posts: