Add selected file thumbnails

src/public/upload.html

@@ -55,6 +55,7 @@
       const list = form.querySelector(".file-list");
       const status = form.querySelector(".upload-status");
       const thanks = document.querySelector(".thank-you");
+      let previewUrls = [];
       submit.disabled = true;
 
       const formatBytes = (bytes) => {
@@ -68,8 +69,14 @@
         status.dataset.type = type;
       };
 
+      const clearPreviews = () => {
+        previewUrls.forEach((url) => URL.revokeObjectURL(url));
+        previewUrls = [];
+      };
+
       input?.addEventListener("change", () => {
         const files = Array.from(input.files || []);
+        clearPreviews();
         list.replaceChildren();
 
         if (files.length === 0) {
@@ -81,11 +88,34 @@
 
         files.forEach((file) => {
           const item = document.createElement("li");
+          const meta = document.createElement("div");
           const name = document.createElement("span");
           const size = document.createElement("span");
+          const preview = document.createElement("div");
+          const previewUrl = URL.createObjectURL(file);
+
+          previewUrls.push(previewUrl);
+          meta.className = "file-list__meta";
+          preview.className = "file-list__preview";
           name.textContent = file.name;
           size.textContent = formatBytes(file.size);
-          item.append(name, size);
+          if (file.type.startsWith("video/")) {
+            const video = document.createElement("video");
+            video.src = previewUrl;
+            video.muted = true;
+            video.playsInline = true;
+            video.preload = "metadata";
+            preview.append(video);
+          } else if (file.type.startsWith("image/")) {
+            const image = document.createElement("img");
+            image.src = previewUrl;
+            image.alt = "";
+            preview.append(image);
+          } else {
+            preview.textContent = "FILE";
+          }
+          meta.append(name, size);
+          item.append(meta, preview);
           list.append(item);
         });