diff --git a/assets/sass/style.sass b/assets/sass/style.sass index 2bd2336f896ae9020ecb07b6e40b27f1ba74b634..6a084522b280860148f58a6f40a86bf0ffe0a2d6 100644 --- a/assets/sass/style.sass +++ b/assets/sass/style.sass @@ -96,6 +96,29 @@ form.upload text-align: center background: #333333 + &:not(.submitted) + .upload-label + display: none + .submitted + label, input + display: none + + label + display: inline-block + background: #FFC107 + padding: 4px 16px + border-radius: 2px + box-shadow: 0 1px 2px rgba(0,0,0,0.1) + line-height: 24px + color: #282828 + cursor: pointer + &:hover,&:focus + background: #FFD54F + box-shadow: 0 2px 4px rgba(0, 0, 0, 0.2) + + input + display: none + .images display: flex max-width: 1024px diff --git a/templates/upload.html b/templates/upload.html index a77e5f7e743a710f733b1349a859804c31a8f43d..ae4cd6ab517b3bc06c37340d7707f7d4bc460348 100644 --- a/templates/upload.html +++ b/templates/upload.html @@ -20,9 +20,18 @@ {{end}} {{end}} <form class="upload" action="/upload/" method="POST" enctype="multipart/form-data"> - <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov" - multiple/><br> - <input type="submit"/> + <input type="file" name="file" accept=".jpg,.jpeg,.png,.gif,.apng,.tiff,.tif,.bmp,.webp,.mp4,.mov" multiple/> + <label for="file">Select Files</label> + <input type="submit" value="Upload"/> + <p class="upload-label">Uploading…</p> </form> </div> +<script> + const form = document.querySelector("form.upload"); + const element = document.querySelector("form.upload input[type=file]"); + element.addEventListener("change", () => { + form.submit(); + form.classList.add("submitted"); + }) +</script> {{end}} \ No newline at end of file