Figure out where to hold onto files before upload

src/lib/components/forms/DocumentUpload.svelte

@@ -18,22 +18,18 @@
   import Text from "../inputs/Text.svelte";
 
   import { DOCUMENT_TYPES } from "@/config/config.js";
-  import { removeUnsupportedTypes } from "@/lib/utils/validateFiles";
-
-  interface UploadFile {
-    index: number;
-    name: string;
-    type: string;
-    size: number;
-    file: File;
-  }
+  import { isSupported } from "@/lib/utils/validateFiles";
+  import { afterUpdate } from "svelte";
+
+  export let files: File[] = [];
 
-  export let files: UploadFile[] = [];
+  let uploader: HTMLInputElement;
 
   let form: HTMLFormElement;
 
   let fileDropActive: boolean;
 
+  // todo: fetch projects in load function
   const projectOptions = [
     { value: "1", label: "FBI Files" },
     { value: "2", label: "1033 Program" },
@@ -55,29 +51,15 @@
   let ocrEngine = ocrEngineOptions[0];
 
   export function values() {
-    return Object.fromEntries(new FormData(form));
-  }
-
-  function createUploadFile(file: File, index: number): UploadFile {
-    return {
-      index,
-      name: file.name,
-      type: file.type,
-      size: file.size,
-      file,
-    };
+    return Array.from(new FormData(form));
   }
 
   function addFiles(filesToAdd: FileList) {
-    console.log(...filesToAdd);
-    // const supportedFiles = removeUnsupportedTypes([...filesToAdd]);
-    // files = files.concat(supportedFiles.map(createUploadFile));
-    const newFiles = Array.from(filesToAdd).map(createUploadFile);
-    files = [...files, ...newFiles];
+    files = files.concat(Array.from(filesToAdd).filter(isSupported));
   }
 
-  function removeFile(fileToRemove: UploadFile) {
-    files = files.filter((file) => file.index !== fileToRemove.index);
+  function removeFile(index: number) {
+    files = files.filter((f, i) => i !== index);
   }
 
   function formatFileType(filetype: string) {
@@ -87,7 +69,19 @@
     return "unknown";
   }
 
-  $: console.log(files);
+  $: total = files.reduce((t, file) => {
+    return t + file.size;
+  }, 0);
+
+  afterUpdate(() => {
+    const dt = new DataTransfer();
+
+    files.forEach((file) => {
+      dt.items.add(file);
+    });
+
+    uploader.files = dt.files;
+  });
 </script>
 
 <form
@@ -102,33 +96,32 @@
   <Flex gap={1} align="stretch" wrap>
     <div class="files">
       <div class="fileList" class:empty={files.length === 0}>
-        {#each files as file}
+        {#each files as file, index}
           <Flex align="center" gap={1}>
             <p class="fileInfo">
               {formatFileType(file.type)} / {filesize(file.size)}
             </p>
             <div class="title">
               <Text name="title" bind:value={file.name} />
+              <input type="hidden" name="filename" value={file.name} />
             </div>
             <button
               class="fileRemove"
-              on:click|preventDefault={() => removeFile(file)}
+              on:click|preventDefault={() => removeFile(index)}
             >
               <XCircleFill24 />
             </button>
-            <input
-              type="file"
-              name="file"
-              bind:value={file.file}
-              accept={DOCUMENT_TYPES.join(",")}
-            />
           </Flex>
         {:else}
           <Empty icon={File24}>
-            Get started by selecting, pasting, or dragging-and-dropping files
+            Get started by selecting, pasting or dragging-and-dropping files
             below
           </Empty>
         {/each}
+
+        <div class="total">
+          <p>Total upload size: {filesize(total)}</p>
+        </div>
       </div>
       <div class="fileUpload">
         <Dropzone bind:active={fileDropActive} onDrop={addFiles}>
@@ -193,6 +186,14 @@
       </Flex>
       <Button type="submit" full mode="primary"><Upload16 />Begin Upload</Button
       >
+
+      <input
+        type="file"
+        name="uploads"
+        multiple
+        bind:this={uploader}
+        accept={DOCUMENT_TYPES.join(",")}
+      />
     </div>
   </Flex>
 </form>
@@ -312,4 +313,8 @@
     border: none;
     border-top: 1px solid var(--gray-2, #d8dee2);
   }
+
+  input[name="uploads"] {
+    display: none;
+  }
 </style>

src/lib/components/inputs/File.svelte

@@ -12,6 +12,7 @@
   export let onFileSelect: (files: FileList) => void;
   export let multiple = false;
   export let buttonMode: ComponentProps<Button>["mode"] = "ghost";
+  export let files: FileList = null;
 
   // Bound to the file picker input
   let picker: HTMLInputElement;
@@ -40,6 +41,7 @@
     {name}
     accept={DOCUMENT_TYPES.join(",")}
     {multiple}
+    bind:files
     bind:this={picker}
     on:change={handleFiles}
     class="picker"

src/lib/utils/validateFiles.ts

@@ -1,5 +1,7 @@
 import { DOCUMENT_TYPES } from "@/config/config.js";
 
+const types = new Set(DOCUMENT_TYPES);
+
 /** Returns an array of only files with supported types */
 export function removeUnsupportedTypes(files: File[]) {
   return files.filter((file) => {
@@ -8,3 +10,8 @@ export function removeUnsupportedTypes(files: File[]) {
     return DOCUMENT_TYPES.includes(extension);
   });
 }
+
+export function isSupported(file: File) {
+  const extension = file.name.toLowerCase().trim().split(".").pop();
+  return types.has(extension);
+}

src/routes/app/upload/+page.server.ts

@@ -5,7 +5,7 @@ import * as documents from "$lib/api/documents";
 export const actions: Actions = {
   default: async ({ request, cookies, fetch }) => {
     const data = await request.formData();
-    const files = Array.from(data.getAll("file"));
+    const files = Array.from(data.getAll("uploads"));
 
     console.log(data);
     console.log(files);

src/routes/app/upload/+page.svelte

@@ -1,31 +1,13 @@
 <script lang="ts">
-  import type { PageData, ActionData } from "./$types";
-  import type { Writable } from "svelte/store";
-  import type { Document } from "$lib/api/types";
-  import type { User } from "@/api/types/orgAndUser";
-
-  import { getContext, onMount } from "svelte";
+  import { onMount } from "svelte";
 
   import DocumentUpload from "$lib/components/forms/DocumentUpload.svelte";
 
-  const me: Writable<User> = getContext("me");
-
   // export let data: PageData;
   // export let form: ActionData;
 
   let uploader: DocumentUpload;
 
-  let files: FileList;
-  let documents: Document[] = [];
-
-  $: documents = Array.from(files || []).map((file) => {
-    return {
-      title: file.name,
-      description: "",
-      access: "private",
-    } as Document;
-  });
-
   onMount(() => {
     // @ts-ignore
     window.uploader = uploader;