-
Notifications
You must be signed in to change notification settings - Fork 1
/
index.html
75 lines (73 loc) · 2.08 KB
/
index.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
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
<!DOCTYPE HTML>
<html>
<head>
<title>AngularJS file directive</title>
<script src="bower_components/angular/angular.js"></script>
<script src="bower_components/error-stack-parser/dist/error-stack-parser.min.js"></script>
<script src="autoload.js"></script>
<script src="directive.js"></script>
<script>
angular.module("fileExample", ["angular-input-file"])
.controller("ExampleController", ["$scope", function($scope) {
$scope.file = {}
$scope.files = []
$scope.log = function log() {
console.log($scope.file)
}
$scope.show = function show() {
return {
name: $scope.file.name,
size: $scope.file.size,
type: $scope.file.type,
data: $scope.file.reader && $scope.file.reader.result,
}
}
}])
</script>
<style>
input.ng-invalid {
outline: 1px solid red;
}
</style>
</head>
<body data-ng-app="fileExample">
<main data-ng-controller="ExampleController">
<form action="/process" method="POST">
<label>
Multiple files:
<input multiple type="file" data-ng-model="files" data-max-size="2 MiB" />
</label>
<label>
Single file:
<input type="file" data-ng-model="file" />
</label>
<button type="button" data-ng-click="log()">Log</button>
</form>
<section>
<header>File</header>
<span>{{show()}}</span>
</section>
<section>
<header>Files</header>
<table>
<thead>
<tr>
<th>Name</th>
<th>Size</th>
<th>Type</th>
<th>Data</th>
</tr>
</thead>
<tbody>
<tr data-ng-repeat="file in files">
<td>{{file.name}}</td>
<td>{{file.size}}</td>
<td>{{file.type}}</td>
<td>{{file.reader.result}}</td>
</tr>
</tbody>
</table>
</section>
</main>
</body>
</html>