Minor UI improvements

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

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