generated from nighthawkcoders/Nighthawk-Pages
-
Notifications
You must be signed in to change notification settings - Fork 0
/
cc-image.html
88 lines (88 loc) · 3.43 KB
/
cc-image.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
<html>
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<style>
/* Your CSS styles here */
</style>
</head>
<div id="sidebar">
<a href="cc-home.html">Home</a>
<a href="cc-message.html">Message</a>
<a href="cc-assistant.html">Assistant</a>
<a href="cc-channel.html">Channel</a>
<a href="cc-account.html">Account</a>
<a href="cc-image.html">Image</a>
</div>
<div class="container">
<div class="image-upload" id="image-upload">
<form method="post" enctype="multipart/form-data">
<div class="button">
<label for="chooseFile">
:point_right: CLICK HERE! :point_left:
</label>
</div>
<input type="file" id="chooseFile" name="chooseFile" accept="image/*" onchange="loadFile(this)">
</form>
<div class="fileContainer">
<div class="fileInput">
<p>FILE NAME: </p>
<p id="fileName"></p>
</div>
<div class="buttonContainer">
<button class="submitButton" id="submitButton">SUBMIT</button>
</div>
</div>
</div>
<div class="image-show" id="image-show"></div>
</div>
<script>
username = sessionStorage.getItem("uid");
if (username == null) {
location.href = "/place/";
}
var submit = document.getElementById('submitButton');
submit.onclick = showImage;
var username = sessionStorage.getItem("uid");
const imageUploadUrl = "http://127.0.0.1:8765/image";
async function showImage() {
var newImage = document.getElementById('image-show').lastElementChild;
newImage.style.visibility = "visible";
document.getElementById('image-upload').style.visibility = 'hidden';
document.getElementById('fileName').textContent = null;
const file = document.getElementById("chooseFile").files[0];
const formData = new FormData();
formData.append('username', username);
formData.append('image', file);
try {
const imageUploadResponse = await fetch(imageUploadUrl, {
method: "POST",
body: formData
});
if (imageUploadResponse.ok) {
console.log("Image uploaded successfully");
location.href = "/skatepark.co/";
} else {
console.error("Image upload failed");
}
} catch (error) {
console.error("Error uploading image:", error);
}
}
function loadFile(input) {
var file = input.files[0];
var name = document.getElementById('fileName');
name.textContent = file.name;
var newImage = document.createElement("img");
newImage.setAttribute("class", 'img');
newImage.src = URL.createObjectURL(file);
newImage.style.width = "70%";
newImage.style.height = "70%";
newImage.style.visibility = "hidden";
newImage.style.objectFit = "contain";
var container = document.getElementById('image-show');
container.appendChild(newImage);
}
</script>
</body>
</html>