This repository has been archived by the owner on Nov 19, 2018. It is now read-only.
/
demo.html
99 lines (83 loc) · 3.25 KB
/
demo.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
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
<!doctype html>
<html>
<head>
<meta name="viewport" content="width=device-width, minimum-scale=1.0, initial-scale=1.0, user-scalable=yes">
<title>file-input demo</title>
<script src="../webcomponentsjs/webcomponents-lite.js"></script>
<link rel="import" href="file-input.html">
<!--Only used by the demo to add common bootstrap button styles to the file chooser-->
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.1.1/css/bootstrap.min.css">
<style>
.pre {
white-space: pre;
unicode-bidi: embed;
}
FILE-INPUT { position: relative; }
</style>
</head>
<body unresolved>
<h1>Easily style a file chooser and set restrictions:</h1>
<p>See the code for this demo in the <a href="https://github.com/garstasio/file-input/tree/gh-pages/components/file-input/demo.html">demo.html file</a>
of the <a href="https://github.com/garstasio/file-input">file-input GitHub repository</a>.</p>
<file-input class="btn btn-primary" extensions='["jpeg", "jpg"]' min-size="500000" max-size="3000000">
<span class="glyphicon glyphicon-file"></span> Select a file
</file-input>
<div>
<br/>
<p>We've restricted files to those with a "jpeg" or jpg" extension. Files also must be between 500 kB and 3 MB in size.</p>
</div>
<h3>valid selected files:</h3>
<div id="validFiles">
No files selected.
</div>
<h3>invalid selected files:</h3>
<div id="invalidFiles">
No files selected.
</div>
</body>
<script>
window.addEventListener('WebComponentsReady', function(e) {
document.body.removeAttribute('unresolved');
});
document.getElementsByTagName('file-input')[0].addEventListener('change', function(event) {
var valid = event.detail.valid,
invalid = event.detail.invalid,
validFilesEl = document.getElementById('validFiles'),
validFiles = [],
invalidFilesEl = document.getElementById('invalidFiles'),
invalidFiles = {};
if (valid.length) {
validFiles = valid.map(function(file) {
return {
name: file.name,
size: file.size
};
});
validFilesEl.className = 'pre'
validFilesEl.innerHTML = JSON.stringify(validFiles, null, 3);
}
else {
validFilesEl.className = ''
validFilesEl.innerHTML = 'No valid files.';
}
if (invalid.count) {
Object.keys(invalid).forEach(function(key) {
if (key !== 'count') {
invalidFiles[key] = invalid[key].map(function(file) {
return {
name: file.name,
size: file.size
};
});
}
});
invalidFilesEl.className = 'pre'
invalidFilesEl.innerHTML = JSON.stringify(invalidFiles, null, 3);
}
else {
invalidFilesEl.className = ''
invalidFilesEl.innerHTML = 'No invalid files.';
}
});
</script>
</html>