<!DOCTYPE html>
<html lang="en" ng-app='myApp'>
<head>
<meta charset="UTF-8">
<title>Angular Base64 Upload Demo</title>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/css/bootstrap.min.css">
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/angular.js/1.3.15/angular.min.js"></script>
<script type="text/javascript" src="https://cdn.rawgit.com/adonespitogo/angular-base64-upload/master/src/angular-base64-upload.js"></script>
<script type="text/javascript" src="script.js">
</script>
<style>
body{padding-bottom: 50px;}
.alert{margin-top: 15px;}
</style>
</head>
<body ng-controller="ctrl as ctrl">
<div class="container">
<form name="form">
<h3>Single File Selection</h3>
<div class="input-group">
<label for="file">Select File</label>
<input type="file" ng-model="file" name="file" base-sixty-four-input required onload="onLoad" maxsize="500" accept="image/*">
<span class="help-block">
<ul>
<li>required</li>
<li>maxsize = 500</li>
<li>accept = image/*</li>
</ul>
</span>
</div>
<div class="alert" ng-class="{'alert-danger': form.file.$invalid, 'alert-success': form.file.$valid}">
form.file.$error:
{{form.file.$error}}
</div>
<b>Model Value:</b>
<table class="table table-bordered table-striped">
<tr>
<th>filename</th>
<th>filetype</th>
<th>filesize (<i><small>KB</small></i>)</th>
<th>base64</th>
</tr>
<tr ng-show="file">
<td>{{file.filename}}</td>
<td>{{file.filetype}}</td>
<td>{{file.filesize / 1000}}</td>
<td>{{file.base64.substring(0, 30)}}...</td>
</tr>
<tr>
<td colspan="4" ng-show="!file">
<small><i>No file selected.</i></small>
</td>
</tr>
</table>
<hr>
<h3>Multiple Files Selection</h3>
<div class="input-group">
<label for="file">Select Files</label>
<span class="help-block">
<ul>
<li>required</li>
<li>minsize = 500</li>
<li>accept = image/*, .zip</li>
<li>minnum = 2</li>
</ul>
</span>
<input type="file" ng-model="files" name="files" base-sixty-four-input multiple accept="image/*, .zip" minsize="500" required minnum="2" on-change="onChange">
</div>
<div class="alert" ng-class="{'alert-danger': form.files.$invalid, 'alert-success': form.files.$valid}">
form.files.$error:
{{form.files.$error}}
</div>
<b>Model Value:</b>
<table class="table table-bordered table-striped">
<tr>
<th>filename</th>
<th>filetype</th>
<th>filesize (<i><small>KB</small></i>)</th>
<th>base64</th>
</tr>
<tr ng-repeat="file in files">
<td>{{file.filename}}</td>
<td>{{file.filetype}}</td>
<td>{{file.filesize / 1000}}</td>
<td>{{file.base64.substring(0, 30)}}...</td>
</tr>
<tr>
<td colspan="4" ng-show="files.length == 0">
<small><i>No file selected.</i></small>
</td>
</tr>
</table>
</form>
</div>
</body>
</html>
/* Styles go here */
angular.module('myApp', ['naif.base64'])
.controller('ctrl', function($scope, $http, $window, $rootScope){
$scope.onChange = function (e, fileList) {
alert('this is on-change handler!');
};
$scope.onLoad = function (e, reader, file, fileList, fileOjects, fileObj) {
alert('this is handler for file reader onload event!');
};
var uploadedCount = 0;
$scope.files = [];
})