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>