Skip to content

Commit 4fa163f

Browse files
author
Pablo Brasero Moreno
committed
Only the client code is relevant, so put it on its own
1 parent 36c23d6 commit 4fa163f

File tree

2 files changed

+70
-87
lines changed

2 files changed

+70
-87
lines changed

‎example_html5_upload.rb

+1-87
Original file line numberDiff line numberDiff line change
@@ -2,7 +2,7 @@
22
require 'pp'
33

44
get '/' do
5-
HTML_CODE
5+
send_file File.join(settings.public_folder, 'index.html')
66
end
77

88
post '/upload' do
@@ -17,89 +17,3 @@
1717
}
1818
''.tap{|output| PP.pp(details, output) }
1919
end
20-
21-
22-
#
23-
# Javascript code
24-
#
25-
26-
JS_CODE =<<-JS
27-
var uploadBtn = document.getElementById('upload-button-id');
28-
uploadBtn.onclick = function (evt) {
29-
var fileInput = document.getElementById('file-id');
30-
var file = fileInput.files[0];
31-
var formData = new FormData();
32-
var action = '/upload';
33-
formData.append('our-file', file);
34-
35-
var xhr = new XMLHttpRequest();
36-
xhr.upload.addEventListener('loadstart', onloadstartHandler, false);
37-
xhr.upload.addEventListener('progress', onprogressHandler, false);
38-
xhr.upload.addEventListener('load', onloadHandler, false);
39-
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
40-
xhr.open('POST', action, true);
41-
xhr.send(formData); // Simple!
42-
43-
return false;
44-
45-
function onloadstartHandler(evt) {
46-
var div = document.getElementById('upload-status');
47-
div.innerHTML = 'Upload started!';
48-
}
49-
50-
function onloadHandler(evt) {
51-
var div = document.getElementById('upload-status');
52-
div.innerHTML = 'Upload successful!';
53-
}
54-
55-
function onprogressHandler(evt) {
56-
var div = document.getElementById('progress');
57-
var percent = evt.loaded/evt.total*100;
58-
div.innerHTML = 'Progress: ' + percent + '%';
59-
}
60-
61-
function onreadystatechangeHandler(evt) {
62-
var status = null;
63-
64-
try {
65-
status = evt.target.status;
66-
}
67-
catch(e) {
68-
return;
69-
}
70-
71-
if (status == '200' && evt.target.responseText) {
72-
var result = document.getElementById('result');
73-
result.innerHTML = '<p>The server saw it as:</p><pre>' + evt.target.responseText + '</pre>';
74-
}
75-
}
76-
}
77-
JS
78-
79-
80-
#
81-
# HTML code
82-
#
83-
84-
HTML_CODE =<<-HTML
85-
<!DOCTYPE html>
86-
<html lang="en">
87-
<head>
88-
<meta charset="utf-8" />
89-
<title>Ajax upload form</title>
90-
</head>
91-
<body>
92-
<form action="/" method="post" enctype="multipart/form-data" id="form-id">
93-
<p><input id="file-id" type="file" name="our-file" /> <input type="button" value="Upload" id="upload-button-id" /></p>
94-
<p><label>Some other field: <input name="other-field" type="text" id="other-field-id" /></label></p>
95-
<p><input type="submit" value="Save" /></p>
96-
<script>
97-
#{JS_CODE}
98-
</script>
99-
<p id="upload-status"></p>
100-
<p id="progress"></p>
101-
<pre id="result"></pre>
102-
</form>
103-
</body>
104-
</html>
105-
HTML

‎public/index.html

+69
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,69 @@
1+
<!DOCTYPE html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="utf-8" />
5+
<title>Ajax upload form</title>
6+
</head>
7+
<body>
8+
<form action="/" method="post" enctype="multipart/form-data" id="form-id">
9+
<p><input id="file-id" type="file" name="our-file" /> <input type="button" value="Upload" id="upload-button-id" /></p>
10+
<p><label>Some other field: <input name="other-field" type="text" id="other-field-id" /></label></p>
11+
<p><input type="submit" value="Save" /></p>
12+
<script>
13+
var uploadBtn = document.getElementById('upload-button-id');
14+
uploadBtn.onclick = function (evt) {
15+
var fileInput = document.getElementById('file-id');
16+
var file = fileInput.files[0];
17+
var formData = new FormData();
18+
var action = '/upload';
19+
formData.append('our-file', file);
20+
21+
var xhr = new XMLHttpRequest();
22+
xhr.upload.addEventListener('loadstart', onloadstartHandler, false);
23+
xhr.upload.addEventListener('progress', onprogressHandler, false);
24+
xhr.upload.addEventListener('load', onloadHandler, false);
25+
xhr.addEventListener('readystatechange', onreadystatechangeHandler, false);
26+
xhr.open('POST', action, true);
27+
xhr.send(formData); // Simple!
28+
29+
return false;
30+
31+
function onloadstartHandler(evt) {
32+
var div = document.getElementById('upload-status');
33+
div.innerHTML = 'Upload started!';
34+
}
35+
36+
function onloadHandler(evt) {
37+
var div = document.getElementById('upload-status');
38+
div.innerHTML = 'Upload successful!';
39+
}
40+
41+
function onprogressHandler(evt) {
42+
var div = document.getElementById('progress');
43+
var percent = evt.loaded/evt.total*100;
44+
div.innerHTML = 'Progress: ' + percent + '%';
45+
}
46+
47+
function onreadystatechangeHandler(evt) {
48+
var status = null;
49+
50+
try {
51+
status = evt.target.status;
52+
}
53+
catch(e) {
54+
return;
55+
}
56+
57+
if (status == '200' && evt.target.responseText) {
58+
var result = document.getElementById('result');
59+
result.innerHTML = '<p>The server saw it as:</p><pre>' + evt.target.responseText + '</pre>';
60+
}
61+
}
62+
}
63+
</script>
64+
<p id="upload-status"></p>
65+
<p id="progress"></p>
66+
<pre id="result"></pre>
67+
</form>
68+
</body>
69+
</html>

0 commit comments

Comments
 (0)