-
Notifications
You must be signed in to change notification settings - Fork 0
/
Copy pathupload_board.html
executable file
·134 lines (100 loc) · 4.24 KB
/
upload_board.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
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
---
title: "Upload"
img: "create.png"
---
<!DOCTYPE html>
<html>
{% include head.html %}
<body>
{% include pageheader.html %}
<section id="main">
<!-- Page Content -->
<div class="content-section-a">
<!-- 12:21 -->
<div class="container">
<div class="row">
<div class="col-lg-5 col-sm-6">
<hr class="section-heading-spacer">
<div class="clearfix"></div>
<h2 class="section-heading">{{ page.title }}</h2>
<div class="lead">
<p>To make your own communication aid, there are three steps. </p>
<ol>
<li> Watch our <a href=guides.html>3 minute getting started video</a></li>
<li> Make some changes to either our <a href=https://raw.github.com/joereddington/CommuniKate/master/ck12/CK12%2BV2.pptx>CK12 template</a> or <a href=https://raw.githubusercontent.com/joereddington/CommuniKate/master/ck20/CK20V2.2.pptx>CK20 template</a>. </li>
<li> Upload your version using the form below. </li>
</ol>
<form action="https://code.theopenvoicefactory.org/webinterface/upload.php" method="post" enctype="multipart/form-data" class="file-submit" id="uploadForm">
<fieldset>
<legend>Upload Form</legend>
<h3>File to upload</h3>
<p>The Open Voice Factory is simple. There are no usernames and no passwords. Just upload a template and you’ll be given a special link that you can always use to get back to the communication device you created. </p>
<input type="file" name="fileToUpload" accept=".pptx" id="fileToUpload" required>
<br>
<h3>Grid size</h3>
<p>Please choose the correct grid size for your template. </p>
<label>
<input type="radio" name="size" value="5" class="size" required>
5 wide and 5 tall
</label>
<br>
<label>
<input type="radio" name="size" value="4" class="size">
4 wide and 4 tall
</label>
<br>
<progress id="uploadProgress" value="0" max="100"></progress> <!-- Progress bar -->
<br>
<div id="status"></div>
<button class="button" type="submit" data-tooltip="Please select a file and a grid size first!">Process uploaded file</button>
</fieldset>
</form>
<h3> Notes</h3>
<ul>
<li> Anyone with your secret link will be able to view your files. Please keep this in mind before uploading content that may be private.
<li> Make sure you test the resulting link thoroughly! There may be lurking bugs in our code and we'd hate for an end-user to be the first ones to find them.
</ul>
</div>
<script>
document.getElementById('uploadForm').addEventListener('submit', function (e) {
e.preventDefault();
var form = e.target;
var formData = new FormData(form);
var xhr = new XMLHttpRequest();
xhr.open(form.method, form.action, true);
document.getElementById('status').textContent="Uploading";
xhr.upload.addEventListener('progress', function (e) {
if (e.lengthComputable) {
console.log("Here");
var percentComplete = (e.loaded / e.total) * 100;
document.getElementById('uploadProgress').value = percentComplete;
}
});
xhr.addEventListener('load', function () {
if (xhr.status == 200) {
// Handle success actions here
document.getElementById('status').textContent="Uploaded and processing";
document.getElementById('uploadForm').submit();
} else {
document.getElementById('status').textContent="Upload failed";
// Handle error actions here
}
});
xhr.send(formData);
});
</script>
</div>
<div class="col-lg-5 col-lg-offset-2 col-sm-6">
<img class="img-responsive" src="img/services/{{ page.img }}" alt="">
</div>
</div>
</div>
<!-- /.container -->
</div>
<!-- /.content-section-a -->
</section>
{% include contact.html %}
{% include footer.html %}
{% include js.html %}
</body>
</html>