failed-galleries/php-gallery
1
0
Fork 0
mirror of https://github.com/Fluffy-Bean/image-gallery.git synced 2025-01-29 17:28:27 +00:00
Code Issues Packages Projects Releases Wiki Activity

Image preview on upload

Browse source
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
Show stats Download patch file Download diff file Expand all files Collapse all files

8
css/main.css
View file

@ -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;
}
/*
|-------------------------------------------------------------

12
css/scss/_body.scss
View file

@ -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;
}
}
/*

11
upload.php
View file

@ -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>