-
Notifications
You must be signed in to change notification settings - Fork 0
/
template.html
81 lines (78 loc) · 1.88 KB
/
template.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
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<title>
Image Upload
</title>
</head>
<style>
h1, label, form, .beholder {
width: 100%;
}
* {
text-align: center;
}
body {
background-color: #282a36;
color: #f8f8f2;
font-size: 2em;
}
input[type="file"] {
display: none;
}
input[type="submit"] {
border: solid;
border-color: #bd93f9;
border-width: 10;
background: #44475a;
color: #f8f8f2;
font-size: 2em;
border-radius: 20%;
}
a {
text-decoration: none;
color: white;
}
.beholder {
display: grid;
gap: 5vw;
grid-template-columns: auto auto auto;
}
</style>
<body>
<h1>Save an image</h1> <br>
<form enctype="multipart/form-data" action="/save" method="post" onsubmit="send(event,this)">
<label class="image" for="image">Click here for selecting the image
<input required type="file" name="image" id="image">
</label>
<br><br>
<input type="submit" value="Submit">
</form>
<div class="beholder"></div>
</body>
<script>
let holder = document.getElementsByClassName("beholder")[0];
const host = "https://" + (new URL(window.location.href)).host;
function send(e,form) {
fetch(form.action,{method:'post', body: new FormData(form)}).then( (response) => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json();
}
).then( (resp) => {
console.log(resp);
let img_div = document.createElement("div");
img_div.style.textAlign = "center";
let img = new Image();
img.src = host + "/get?uuid=" + resp.uuid + "&width=300&height=300";
img_div.appendChild(img);
img_div.innerHTML += "<p>uuid: " + resp.uuid + "</p><br>" + "<a href=" + host + "/get?uuid=" + resp.uuid + "&width=300&height=300>Link</a>";
holder.appendChild(img_div);
} );
console.log('We send post asynchronously (AJAX)');
e.preventDefault();
}
</script>
</html>