From 3110858151966d916a00dfefae4711a154612f74 Mon Sep 17 00:00:00 2001
From: Fluffy-Bean <michal-gdula@protonmail.com>
Date: Fri, 23 Sep 2022 08:03:22 +0000
Subject: [PATCH] Image preview on upload

---
 css/main.css        |  8 ++++++++
 css/scss/_body.scss | 12 ++++++++++++
 upload.php          | 11 +++++++++++
 3 files changed, 31 insertions(+)

diff --git a/css/main.css b/css/main.css
index 24ea4a6..13857bf 100644
--- a/css/main.css
+++ b/css/main.css
@@ -706,6 +706,14 @@ nav .btn {
   font-family: "Secular One", sans-serif;
   text-rendering: optimizeLegibility;
 }
+.upload-root > img {
+  margin: 0 auto;
+  max-width: 100%;
+  max-height: 20rem;
+  border-radius: -0.3rem;
+  display: flex;
+  flex-direction: column;
+}
 
 /*
  |-------------------------------------------------------------
diff --git a/css/scss/_body.scss b/css/scss/_body.scss
index d593c31..769cd88 100644
--- a/css/scss/_body.scss
+++ b/css/scss/_body.scss
@@ -482,6 +482,18 @@
 .upload-root {
     @include defaultDecoration($page-accent);
     @include defaultFont();
+
+    & > img {
+        margin: 0 auto;
+
+        max-width: 100%;
+        max-height: 20rem;
+
+        border-radius: calc($rad - 0.7rem);
+
+        display: flex;
+        flex-direction: column;
+    }
 }
 
 /*
diff --git a/upload.php b/upload.php
index 5e76cfb..6b6b192 100644
--- a/upload.php
+++ b/upload.php
@@ -27,6 +27,7 @@
 	<div class="upload-root">
 		<h2>Upload image</h2>
 		<p>In this world you have 2 choices, to upload a really cute picture of an animal or fursuit, or something other than those 2 things.</p>
+		<img id="imagePreview" src="">
 		<br>
 		<form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data">
 			<input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
@@ -36,6 +37,16 @@
 			<br>
 			<button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
 		</form>
+		<script>
+			image.onchange = evt => {
+				const [file] = image.files
+				if (file) {
+					imagePreview.src = URL.createObjectURL(file);
+				} else {
+					imagePreview.src = "assets/no_image.png";
+				}
+			}
+		</script>
 	</div>
 
 	<script>