[ui] display image preview before upload

webui/src/components/AddModal.svelte

@@ -56,9 +56,13 @@
     <div class="files">
       {#each files as file}
         <div class="file">
-          <div class="icon">
-            <Icon name="file" />
-          </div>
+          {#if file.type.startsWith("image")}
+            <img src={URL.createObjectURL(file)} alt="To be uploaded." />
+          {:else}
+            <div class="icon">
+              <Icon name="file" />
+            </div>
+          {/if}
           <div class="label">{file.name}</div>
         </div>
       {/each}
@@ -121,12 +125,18 @@
   .file {
     display: flex;
     align-items: center;
+    flex-direction: column;
 
     border: 1px solid var(--foreground);
     border-radius: 4px;
     background: var(--background-lighter);
     padding: 0.5em;
 
+    img {
+      max-height: 12em;
+      max-width: 12em;
+    }
+
     .icon {
       font-size: 24px;
     }