mirror of
https://github.com/Fluffy-Bean/image-gallery.git
synced 2025-02-17 19:00:05 +00:00
Image preview on upload
This commit is contained in:
parent
37b1f94575
commit
3110858151
|
@ -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;
|
||||||
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|-------------------------------------------------------------
|
|-------------------------------------------------------------
|
||||||
|
|
|
@ -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;
|
||||||
|
}
|
||||||
}
|
}
|
||||||
|
|
||||||
/*
|
/*
|
||||||
|
|
11
upload.php
11
upload.php
|
@ -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>
|
||||||
|
|
Loading…
Reference in a new issue