Thanks to visit codestin.com
Credit goes to github.com

Skip to content

Commit 04fbd92

Browse files
cleonardcleonard
committed
Image form demo
1 parent 4a2057b commit 04fbd92

File tree

2 files changed

+206
-0
lines changed

2 files changed

+206
-0
lines changed

‎pyscriptjs/examples/img_form.html

Lines changed: 203 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,203 @@
1+
<!-- Upload file to pyscript -->
2+
3+
<!DOCTYPE html>
4+
<html lang="en-US">
5+
<head>
6+
<meta charset="UTF-8">
7+
<meta name="viewport" content="width=device-width, initial-scale=1">
8+
<title>py-script demos: image upload form</title>
9+
<!-- Styles //-->
10+
<link href="https://fonts.googleapis.com/css2?family=Red+Hat+Text:ital,wght@0,400;0,700;1,400&display=swap" rel="stylesheet">
11+
<link rel="stylesheet" href="static/pyscript.css" />
12+
<style type="text/css">
13+
body {
14+
font-family: "Red Hat Text", sans-serif;
15+
font-size: 18px;
16+
font-weight: 400;
17+
line-height: 1.618;
18+
}
19+
20+
#app {
21+
margin: 1em auto;
22+
width: 1000px;
23+
}
24+
25+
.loading {
26+
display: inline-block;
27+
width: 100px;
28+
height: 100px;
29+
border: 3px solid rgba(255, 255, 255, 0.3);
30+
border-radius: 50%;
31+
border-top-color: black;
32+
animation: spin 1s ease-in-out infinite;
33+
}
34+
35+
.loading-container {
36+
margin: 5em 0 0;
37+
text-align: center;
38+
}
39+
40+
@keyframes spin {
41+
to {
42+
transform: rotate(360deg);
43+
}
44+
}
45+
46+
a {color: #43B029;}
47+
48+
ul#project_list {
49+
margin: 1em 0;
50+
}
51+
52+
ul#project_list li {
53+
list-style: disc;
54+
margin-left: 1.25em;
55+
}
56+
57+
#upload_form, #entry_form {
58+
border-left: 3px solid #777;
59+
display: none;
60+
margin: 1.618em 0;
61+
padding-left: 1em;
62+
}
63+
64+
legend {
65+
display: block;
66+
font-size: 1.25em;
67+
margin: 0.5em 0;
68+
}
69+
70+
input[type=submit], button {
71+
background: #43B029;
72+
border-radius: 3px;
73+
color: white;
74+
padding: 0.35em 1.25em;
75+
}
76+
77+
label {
78+
display: block;
79+
}
80+
81+
textarea {
82+
border: 1px solid #777;
83+
padding: 0.75em;
84+
width: 40em;
85+
height: 10em;
86+
}
87+
88+
table {
89+
border-collapse: collapse;
90+
margin: 1em 0;
91+
}
92+
93+
th, td {
94+
border: 1px solid #777;
95+
padding: 0.35em 0.75em;
96+
}
97+
98+
th {
99+
background: #eee;
100+
font-weight: normal;
101+
}
102+
</style>
103+
104+
<!-- pyscript -->
105+
<script defer src="static/pyscript.js"></script>
106+
</head>
107+
<body>
108+
<div id="app">
109+
<!-- Header //-->
110+
<header>
111+
<h1>py-script Demos: image upload form</h1>
112+
</header>
113+
114+
<main>
115+
<div class="loading-container">
116+
<div class="loading"></div>
117+
</div>
118+
119+
<div id="upload_form">
120+
<fieldset>
121+
<legend>Upload a File (.jpg or .png)</legend>
122+
<ol>
123+
<li>
124+
<label for="upload">File Upload:</label>
125+
<input type="file" name="upload" id="upload" accept="image/png, image/jpeg">
126+
</li>
127+
</ol>
128+
</fieldset>
129+
</div>
130+
131+
<div id="output"></div>
132+
133+
<!-- py-script and py-env -->
134+
135+
<!-- <py-env>
136+
</py-env> -->
137+
138+
<py-script>
139+
import base64
140+
import pyodide
141+
142+
from js import btoa, FileReader, Image
143+
144+
# Handle end of loading
145+
146+
loading = document.getElementsByClassName("loading-container")[0]
147+
loading.style.display = "none"
148+
form = document.getElementById("upload_form")
149+
form.style.display = "block"
150+
151+
# <input> event handler
152+
153+
def write_output(val):
154+
"""Write something to `#output` div"""
155+
output = document.getElementById("output")
156+
output.textContent = str(val)
157+
158+
def get_upload():
159+
"""Load `input#upload` instance from DOM"""
160+
upload = document.getElementById("upload")
161+
return upload
162+
163+
def reader_handler(event):
164+
"""Event listener for FileReader load"""
165+
img_data = event.target.result
166+
create_and_display_img(img_data)
167+
168+
def upload_handler(event):
169+
"""Event listener/top-level controller to handle changing of #upload input"""
170+
reader = FileReader.new()
171+
reader.addEventListener("load", pyodide.create_proxy(reader_handler))
172+
target_file = event.target.files.item(0) # pyodide.JsProxy obj's not subscriptable
173+
reader.readAsBinaryString(target_file)
174+
175+
def create_and_display_img(img_data):
176+
# Create image from binary data
177+
img = Image.new()
178+
img.src = "data:image/jpeg;base64," + btoa(img_data)
179+
180+
# Append to container
181+
container = document.getElementById("container")
182+
container.append(img)
183+
184+
upload = get_upload()
185+
upload.addEventListener("change", pyodide.create_proxy(upload_handler))
186+
187+
</py-script>
188+
189+
<!-- end py-script and py-env -->
190+
191+
<!-- Output -->
192+
193+
<div id="container">
194+
195+
</div>
196+
197+
198+
<!-- End output -->
199+
</main>
200+
</div>
201+
<!-- Scripts //-->
202+
</body>
203+
</html>

‎pyscriptjs/examples/index.html

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -68,5 +68,8 @@ <h2 class="text-2xl font-bold text-blue-600"><a href="./todo.html" target=”_bl
6868

6969
<h2 class="text-2xl font-bold text-blue-600"><a href="./webgl/raycaster/index.html" target=”_blank”>Webgl Icosahedron Example</a></h2>
7070
<p>Demo showing how a Simple Webgl scene would work in PyScript</code> tag</p>
71+
72+
<h2 class="text-2xl font-bold text-blue-600"><a href="./webgl/raycaster/index.html" target=”_blank”>Image upload to browser</a></h2>
73+
<p>Demo demostrating a file uploaded and displayed to the page all via pyscript</p>
7174
</body>
7275
</html>

0 commit comments

Comments
 (0)