Image preview on upload

This commit is contained in:
Michał 2022-09-23 08:03:22 +00:00
parent 37b1f94575
commit 3110858151
3 changed files with 31 additions and 0 deletions

View file

@ -706,6 +706,14 @@ nav .btn {
font-family: "Secular One", sans-serif; font-family: "Secular One", sans-serif;
text-rendering: optimizeLegibility; text-rendering: optimizeLegibility;
} }
.upload-root > img {
margin: 0 auto;
max-width: 100%;
max-height: 20rem;
border-radius: -0.3rem;
display: flex;
flex-direction: column;
}
/* /*
|------------------------------------------------------------- |-------------------------------------------------------------

View file

@ -482,6 +482,18 @@
.upload-root { .upload-root {
@include defaultDecoration($page-accent); @include defaultDecoration($page-accent);
@include defaultFont(); @include defaultFont();
& > img {
margin: 0 auto;
max-width: 100%;
max-height: 20rem;
border-radius: calc($rad - 0.7rem);
display: flex;
flex-direction: column;
}
} }
/* /*

View file

@ -27,6 +27,7 @@
<div class="upload-root"> <div class="upload-root">
<h2>Upload image</h2> <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> <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> <br>
<form id="uploadSubmit" class="flex-down between" method="POST" enctype="multipart/form-data"> <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"> <input id="image" class="btn btn-neutral" type="file" placeholder="select image UwU">
@ -36,6 +37,16 @@
<br> <br>
<button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button> <button id="submit" class="btn btn-good" type="submit"><img class="svg" src="assets/icons/upload.svg">Upload Image</button>
</form> </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> </div>
<script> <script>