neviyn/booru
1
0
Fork 0
Code Issues Releases Activity

Added view of image selected for upload

Browse Source
This commit is contained in:
neviyn 2021-05-15 00:57:14 +01:00
parent a3bcade36b
commit 87b77cf5aa
1 changed files with 23 additions and 1 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

24
src/main/resources/templates/upload.html
View File

@ -3,6 +3,23 @@
<head> <head>
<meta th:replace="fragments :: header"/> <meta th:replace="fragments :: header"/>
<title>Upload</title> <title>Upload</title>
<script>
function previewSelectedImage(){
const preview = document.querySelector('img');
const file = document.querySelector('input[type=file]').files[0];
const reader = new FileReader();
reader.addEventListener("load", function () {
// convert image file to base64 string
preview.src = reader.result;
preview.classList.remove("invisible")
}, false);
if (file) {
reader.readAsDataURL(file);
}
}
</script>
</head> </head>
<body> <body>
<div th:replace="fragments :: navbar"></div> <div th:replace="fragments :: navbar"></div>
@ -12,11 +29,16 @@
<h1>Upload a new image</h1> <h1>Upload a new image</h1>
</div> </div>
</div> </div>
<div class="row justify-content-center">
<div class="col text-center">
<img class="invisible" src="" height="250" alt="user selected image">
</div>
</div>
<div class="row justify-content-center"> <div class="row justify-content-center">
<form action="/upload" class="mb-3 col-6 text-center" enctype="multipart/form-data" method="POST"> <form action="/upload" class="mb-3 col-6 text-center" enctype="multipart/form-data" method="POST">
<input th:name="${_csrf.parameterName}" type="hidden" th:value="${_csrf.token}"/> <input th:name="${_csrf.parameterName}" type="hidden" th:value="${_csrf.token}"/>
<label class="form-label" for="formFile">Image file</label> <label class="form-label" for="formFile">Image file</label>
<input class="form-control" id="formFile" name="file" type="file" th:accept="${@imageConfigurationProperties.typeListForFormFilter()}"> <input class="form-control" id="formFile" name="file" type="file" th:accept="${@imageConfigurationProperties.typeListForFormFilter()}" onchange="previewSelectedImage()">
<label class="form-label" for="formTags">Image tags</label> <label class="form-label" for="formTags">Image tags</label>
<input class="form-control" id="formTags" placeholder="Tags separated by spaces" type="text" name="tags"> <input class="form-control" id="formTags" placeholder="Tags separated by spaces" type="text" name="tags">
<button type="submit" class="btn btn-primary mt-2">Submit</button> <button type="submit" class="btn btn-primary mt-2">Submit</button>