Manage and display list of files to upload

package.json

@@ -22,6 +22,7 @@
     "dompurify": "^3.0.8",
     "fast-copy": "^2.1.0",
     "fast-deep-equal": "^3.1.3",
+    "filesize": "^10.1.1",
     "isomorphic-dompurify": "^2.4.0",
     "jsdom": "^24.0.0",
     "lucene": "^2.1.1",

src/lib/components/forms/DocumentUpload.svelte

@@ -1,6 +1,7 @@
 <script lang="ts">
+  import { filesize } from "filesize";
   import { _ } from "svelte-i18n";
-  import { File16, File24, Upload16 } from "svelte-octicons";
+  import { File16, File24, Upload16, XCircleFill24 } from "svelte-octicons";
   import Dropzone from "../common/Dropzone.svelte";
   import Flex from "../common/Flex.svelte";
   import Field from "../common/Field.svelte";
@@ -12,6 +13,27 @@
   import Empty from "../common/Empty.svelte";
   import InputText from "../common/InputText.svelte";
   import InputFile from "../common/InputFile.svelte";
+  import { removeUnsupportedTypes } from "@/lib/utils/validateFiles";
+
+  interface UploadFile {
+    index: number;
+    name: string;
+    type: string;
+    size: number;
+    file: File;
+  }
+
+  export let files: UploadFile[] = [];
+
+  function createUploadFile(file: File, index: number): UploadFile {
+    return {
+      index,
+      name: file.name,
+      type: file.type,
+      size: file.size,
+      file,
+    };
+  }
 
   const projectOptions = [
     { value: "1", label: "FBI Files" },
@@ -32,79 +54,112 @@
     },
   ];
 
-  let files = [];
   let fileDropActive;
-  function onFileSelect(files: FileList) {
-    console.log(files);
+  function addFiles(filesToAdd: FileList) {
+    const supportedFiles = removeUnsupportedTypes([...filesToAdd]);
+    files = files.concat(supportedFiles.map(createUploadFile));
+  }
+  function removeFile(fileToRemove: UploadFile) {
+    files = files.filter((file) => file.index !== fileToRemove.index);
+  }
+  function renameFile(index: number, name: string) {
+    files = files.map((file) => {
+      if (file.index === index) {
+        file.name = name;
+      }
+      return file;
+    });
+  }
+  function formatFileType(filetype: string) {
+    if (filetype && filetype.includes("/")) {
+      return filetype.split("/")[1];
+    }
+    return "unknown";
   }
 </script>
 
 <form>
   <Flex gap={1} align="stretch">
     <div class="files">
       <div class="fileList" class:empty={files.length === 0}>
-        {#if files.length > 0}
-          {#each files as file}
-            <InputText bind:value={file.name} />
-          {/each}
+        {#each files as file}
+          <Flex align="center" gap={1}>
+            <p class="fileInfo">
+              {formatFileType(file.type)} / {filesize(file.size)}
+            </p>
+            <div class="fileName">
+              <InputText
+                bind:value={file.name}
+                on:change={() => {
+                  console.log(file);
+                }}
+              />
+            </div>
+            <button
+              class="fileRemove"
+              on:click|preventDefault={() => removeFile(file)}
+            >
+              <XCircleFill24 />
+            </button>
+          </Flex>
         {:else}
           <Empty icon={File24}>
             Get started by selecting, pasting, or dragging-and-dropping files
             below
           </Empty>
-        {/if}
+        {/each}
       </div>
       <div class="fileUpload">
-        <Dropzone bind:active={fileDropActive} onDrop={onFileSelect}>
+        <Dropzone bind:active={fileDropActive} onDrop={addFiles}>
           <div class="fileDrop" class:active={fileDropActive}>
             <p class="drop-instructions">Drag and drop files here</p>
             <Flex align="center" justify="center">
               <span class="drop-instructions-or">or</span>
-              <InputFile {onFileSelect}><File16 /> Select Files</InputFile>
+              <InputFile multiple onFileSelect={addFiles}
+                ><File16 /> Select Files</InputFile
+              >
             </Flex>
           </div>
         </Dropzone>
       </div>
     </div>
     <div class="sidebar">
-      <Flex gap={2} direction="column" justify="between">
-        <Flex gap={1} direction="column">
-          <Field>
-            <FieldLabel>Projects</FieldLabel>
-            <InputSelect name="projects" multiple items={projectOptions} />
-          </Field>
-          <hr class="divider" />
-          <Field>
-            <FieldLabel>OCR Engine</FieldLabel>
-            <InputSelect
-              name="ocr_engine"
-              items={ocrEngineOptions}
-              bind:value={ocrEngine}
-            />
-            <p class="ocrEngineHelp" slot="help">
-              {#if typeof ocrEngine !== "string"}
-                {@html ocrEngine?.help}
-              {/if}
-            </p>
-          </Field>
+      <Flex gap={1} direction="column">
+        <Field>
+          <FieldLabel>Projects</FieldLabel>
+          <InputSelect name="projects" multiple items={projectOptions} />
+        </Field>
+        <hr class="divider" />
+        <Field>
+          <FieldLabel>OCR Engine</FieldLabel>
+          <InputSelect
+            name="ocr_engine"
+            items={ocrEngineOptions}
+            bind:value={ocrEngine}
+          />
+          <p class="ocrEngineHelp" slot="help">
+            {#if typeof ocrEngine !== "string"}
+              {@html ocrEngine?.help}
+            {/if}
+          </p>
+        </Field>
+        <Field inline>
+          <input type="checkbox" />
+          <FieldLabel>Force OCR</FieldLabel>
+        </Field>
+        <hr class="divider" />
+        <Premium>
           <Field inline>
-            <input type="checkbox" />
-            <FieldLabel>Force OCR</FieldLabel>
+            <Switch name="revision_control" />
+            <FieldLabel premium>Revision Control</FieldLabel>
           </Field>
-          <hr class="divider" />
-          <Premium>
-            <Field inline>
-              <Switch name="revision_control" />
-              <FieldLabel premium>Revision Control</FieldLabel>
-            </Field>
-            <Field inline slot="basic">
-              <Switch name="revision_control" disabled />
-              <FieldLabel premium>Revision Control</FieldLabel>
-            </Field>
-          </Premium>
-        </Flex>
-        <Button full mode="primary"><Upload16 />Begin Upload</Button>
+          <Field inline slot="basic">
+            <Switch name="revision_control" disabled />
+            <FieldLabel premium>Revision Control</FieldLabel>
+          </Field>
+        </Premium>
       </Flex>
+      <Button full mode="primary"><Upload16 />Begin Upload</Button>
     </div>
   </Flex>
 </form>
@@ -149,14 +204,44 @@
     flex-direction: column;
     justify-content: center;
     align-items: center;
-    gap: 1rem;
+    gap: 0.5rem;
     align-self: stretch;
 
     border-radius: 0.5rem;
     border: 1px solid var(--gray-2, #d8dee2);
     background: var(--gray-1, #f5f6f7);
   }
 
+  .fileInfo {
+    flex: 1 0 0;
+    font-size: var(--font-xs);
+    color: var(--gray-5);
+    white-space: nowrap;
+    text-transform: uppercase;
+  }
+
+  .fileName {
+    flex: 1 1 auto;
+  }
+
+  .fileRemove {
+    display: inline-flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+    appearance: none;
+    background: transparent;
+    border: none;
+    border-radius: 0.5rem;
+    fill: var(--gray-3);
+    cursor: pointer;
+  }
+
+  .fileRemove:hover,
+  .fileRemove:focus {
+    background: var(--blue-1);
+  }
+
   .drop-instructions {
     color: var(--gray-5, #233944);
     text-align: center;
@@ -183,9 +268,13 @@
   }
 
   .sidebar {
-    height: 100%;
     max-width: 18rem;
     flex: 0 1 8rem;
+
+    display: flex;
+    flex-direction: column;
+    justify-content: space-between;
+    gap: 2rem;
   }
 
   .divider {
@@ -197,8 +286,4 @@
   .ocrEngineHelp {
     font-size: var(--font-xs);
   }
-
-  .ocrEngineHelp a {
-    color: var(--blue-3);
-  }
 </style>

src/lib/components/forms/stories/DocumentUpload.stories.svelte

@@ -8,11 +8,27 @@
     tags: ["autodocs"],
     parameters: { layout: "centered" },
   };
+
+  const args = {
+    files: [],
+  };
 </script>
 
 <Template let:args>
   <DocumentUpload {...args} />
 </Template>
 
-<Story name="Empty" />
-<Story name="With Documents" />
+<Story name="Empty" {args} />
+<Story
+  name="With Documents"
+  args={{
+    ...args,
+    files: [
+      new File([new ArrayBuffer(128000)], "fileOne.pdf", {
+        type: "application/pdf",
+      }),
+      new File([], "fileTwo.pdf", { type: "application/pdf" }),
+      new File([], "fileThree.pdf"),
+    ],
+  }}
+/>