From 433862ad0099ecbcadd445e88c677d18e64a41c1 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Fri, 6 Feb 2026 15:43:03 -0500
Subject: [PATCH] refactor(events): modernize event files upload component

- Standardized props and UI using Lucide icons and Element_input_files_tbl.
- Migrated state to Svelte 5 runes ($state, $bindable).
- Updated upload logic to handle sequential processing and event_file creation.
- Improved revalidation logic by clearing Dexie cache before refreshing.
---
 .../events/ae_comp__event_files_upload.svelte | 287 ++++++------------
 1 file changed, 97 insertions(+), 190 deletions(-)

diff --git a/src/routes/events/ae_comp__event_files_upload.svelte b/src/routes/events/ae_comp__event_files_upload.svelte
index 8a3d0e58..baf80353 100644
--- a/src/routes/events/ae_comp__event_files_upload.svelte
+++ b/src/routes/events/ae_comp__event_files_upload.svelte
@@ -1,4 +1,31 @@
 <script lang="ts">
+    /**
+     * src/routes/events/ae_comp__event_files_upload.svelte
+     * Specialized component for uploading files and automatically linking them to Event objects.
+     */
+    import * as Lucide from 'lucide-svelte';
+    import Element_input_files_tbl from '$lib/elements/element_input_files_tbl.svelte';
+
+    // Import storage, functions, and libraries
+    import type { key_val } from '$lib/stores/ae_stores';
+    import { api } from '$lib/api/api';
+    import {
+        ae_loc,
+        ae_sess,
+        ae_api,
+        ae_trig,
+        slct,
+        slct_trigger
+    } from '$lib/stores/ae_stores';
+    import {
+        events_loc,
+        events_sess,
+        events_slct,
+        events_trig
+    } from '$lib/stores/ae_events_stores';
+    import { events_func } from '$lib/ae_events_functions';
+    import { db_events } from '$lib/ae_events/db_events';
+
     interface Props {
         log_lvl?: number;
         // Expecting these for link_to_type: 'event', 'event_location', 'event_presentation', 'event_presenter', 'event_session'
@@ -34,43 +61,12 @@
         label
     }: Props = $props();
 
-    // Imports
-    // Import components and elements
-    import Element_input_files_tbl from '$lib/elements/element_input_files_tbl.svelte';
-
-    // Import storage, functions, and libraries
-    import type { key_val } from '$lib/stores/ae_stores';
-
-    import { api } from '$lib/api/api';
-    import {
-        ae_snip,
-        ae_loc,
-        ae_sess,
-        ae_api,
-        ae_trig,
-        slct,
-        slct_trigger
-    } from '$lib/stores/ae_stores';
-    import {
-        events_loc,
-        events_sess,
-        events_slct,
-        events_trigger
-    } from '$lib/stores/ae_events_stores';
-    import { events_func } from '$lib/ae_events_functions';
-    import { db_events } from '$lib/ae_events/db_events';
-
-    // Exports
-
     // Local Variables
     let task_id = $state(link_to_id);
     let input_file_list: any = $state(null);
-    let ae_promises: key_val = $state({}); // Promise<any>;
-    let ae_triggers: key_val = {};
-
+    let ae_promises: key_val = $state({});
     let input_element_id = 'ae_comp__event_files_upload__input';
 
-    // *** Functions and Logic
     function prevent_default<T extends Event>(fn: (event: T) => void) {
         return function (event: T) {
             event.preventDefault();
@@ -79,49 +75,34 @@
     }
 
     async function handle_submit_form_files(event: SubmitEvent) {
-        console.log('*** handle_submit_form() ***');
+        if (log_lvl) console.log('*** handle_submit_form() ***');
 
         $events_sess.files.disable_submit__event_file_obj = true;
         $events_sess.files.submit_status = 'saving';
         submit_status = 'saving';
         upload_complete = false;
 
-        let hosted_file_results;
-
-        if (event.target[input_element_id].files.length > 0) {
-            task_id = link_to_id; // Ideally this should be the file hash, but we may be uploading multiple files at once. This should be done with a loop instead?
-
-            // Loop through each file and upload them individually in event.target[input_element_id].files
-            // The task_id should be the file hash.
-            // processed_file_list[i] has the file hash_sha256, hash_sha256_match, warnings, uploaded, uploaded_bytes, filename, and file_size_bytes.
-            for (
-                let i = 0;
-                i < event.target[input_element_id].files.length;
-                i++
-            ) {
-                let tmp_file = event.target[input_element_id].files[i];
+        const target = event.currentTarget as HTMLFormElement;
+        const file_input = target ? (target[input_element_id] as HTMLInputElement) : null;
 
+        if (file_input && file_input.files && file_input.files.length > 0) {
+            // Sequential upload to provide reliable progress and avoid server race conditions
+            for (let i = 0; i < file_input.files.length; i++) {
+                const tmp_file = file_input.files[i];
                 task_id = $events_sess.files.processed_file_list[i].hash_sha256;
 
-                hosted_file_results = await handle_input_upload_files(
-                    [tmp_file],
-                    task_id
-                );
-
-                if (hosted_file_results) {
-                    console.log(`hosted_file_results:`, hosted_file_results);
-                } else {
-                    console.log(`hosted_file_results:`, hosted_file_results);
-                }
+                await handle_input_upload_files({
+                    input_upload_files: [tmp_file],
+                    task_id: task_id
+                });
             }
-            // hosted_file_results = await handle_input_upload_files(event.target[input_element_id].files, task_id);
+
+            // Cleanup after batch
             $events_sess.files.processed_file_list = [];
-            $events_sess = $events_sess;
-            event.target.reset();
-            // await tick();
-
-            db_events.file.clear();
+            target.reset();
 
+            // Refresh Local Cache (Optimistic Revalidation)
+            await db_events.file.clear();
             events_func.load_ae_obj_li__event_file({
                 api_cfg: $ae_api,
                 for_obj_type: link_to_type,
@@ -138,16 +119,16 @@
         upload_complete = true;
     }
 
-    async function handle_input_upload_files(input_upload_files, task_id) {
-        log_lvl = 0;
-        if (log_lvl) {
-            console.log(
-                `*** handle_input_upload_files() *** task_id = ${task_id}`
-            );
-        }
+    async function handle_input_upload_files({
+        input_upload_files,
+        task_id
+    }: {
+        input_upload_files: any[];
+        task_id: string;
+    }) {
+        if (log_lvl) console.log(`*** handle_input_upload_files() *** task_id = ${task_id}`);
 
         const form_data = new FormData();
-
         form_data.append('account_id', $ae_loc.account_id);
         form_data.append('link_to_type', link_to_type);
         form_data.append('link_to_id', link_to_id);
@@ -156,117 +137,56 @@
             form_data.append(`file_list`, input_upload_files[i]);
         }
 
-        // hash_sha256, uploaded, uploaded_bytes
-        // $events_sess.files.processed_file_list[i] = {
-        //     ...$events_sess.files.processed_file_list[i],
-        //     uploaded: $ae_sess.api_upload_kv[link_to_id].percent_completed,
-        //     uploaded_bytes: $ae_sess.api_upload_kv[link_to_id].uploaded_bytes,
-        // };
-
-        let params = null;
-
-        let endpoint = '/hosted_file/upload_files';
-
-        // console.log(form_data);
-
-        params = null;
-
-        // Uncomment and the post_promise is not seen by the "await" below
-        // post_promise = await api.post_object({api_cfg: $cfg.api, endpoint: endpoint, params: params, data:form_data});
-        // Uncomment so that the post_promise is not seen by the "await" below
+        // STEP 1: Upload to Hosted Files
         ae_promises.upload__hosted_file_obj = api
             .post_object({
                 api_cfg: $ae_api,
-                endpoint: endpoint,
-                // params: params,
+                endpoint: '/hosted_file/upload_files',
                 form_data: form_data,
                 task_id: task_id,
                 log_lvl: log_lvl
-                // retry_count: 1,
             })
             .then(async function (result) {
-                // console.log('HERE!!', result);
+                // WARNING: endpoint returns a list, we sequentially handle one at a time.
+                const hosted_file_obj = result[0];
+                const hosted_file_id = hosted_file_obj.hosted_file_id;
 
-                // WARNING!!!! ONLY ONE FILE IS EXPECTED TO BE UPLOADED AT A TIME!!!
-                // NOTE: The /hosted_file/upload_files endpoint will always return a list of successful files uploaded. In this case we are only uploading one file and expecting a list of one item.
-                let x = 0;
-                if (log_lvl) {
-                    console.log(`result = `, result[x]);
-                }
-                let hosted_file_obj = result[x];
+                const event_file_data: key_val = {
+                    hosted_file_id: hosted_file_id,
+                    for_type: link_to_type,
+                    for_id: link_to_id,
+                    filename: hosted_file_obj.filename,
+                    extension: hosted_file_obj.extension,
+                    enable: true
+                };
 
-                let hosted_file_id = hosted_file_obj.hosted_file_id;
-
-                let event_file_data: key_val = {};
-                event_file_data['hosted_file_id'] = hosted_file_id;
-                event_file_data['for_type'] = link_to_type;
-                event_file_data['for_id'] = link_to_id;
-                event_file_data['filename'] = hosted_file_obj.filename;
-                event_file_data['extension'] = hosted_file_obj.extension;
-                event_file_data['enable'] = true;
-                if (log_lvl) {
-                    console.log(`event_file_data = `, event_file_data);
-                }
-
-                // $events_sess.files.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least...
-
-                let event_file_id = await events_func
-                    .create_event_file_obj_from_hosted_file_async({
-                        api_cfg: $ae_api,
-                        hosted_file_id: hosted_file_id,
-                        data: event_file_data,
-                        log_lvl: log_lvl
-                    })
-                    .then(function (create_result) {
-                        console.log(create_result); // NOTE: This should be the event_file_id string
-                        // let event_file_id = create_result;
-                        return create_result;
-                    });
-
-                return event_file_id;
-            })
-            .then(function (event_file_id) {
-                // NOTE: Need to make sure the event file records are created first. The update won't see the changes if too fast.
-                // dispatch(
-                //     'event_file_obj_li_updated',
-                //     {
-                //         link_to_type: link_to_type,
-                //         link_to_id: link_to_id,
-                //     }
-                // );
-
-                // $ae_events.pres_mgmt.new_upload_list[i].uploaded = true;
-                // $ae_events.pres_mgmt.new_upload_list[i].uploaded_bytes = event.target.event_file_upload_file_list.files[i].size;
-
-                return event_file_id;
+                // STEP 2: Create Event File Link
+                return await events_func.create_event_file_obj_from_hosted_file_async({
+                    api_cfg: $ae_api,
+                    hosted_file_id: hosted_file_id,
+                    data: event_file_data,
+                    log_lvl: log_lvl
+                });
             })
             .catch(function (error: any) {
-                console.log('Something went wrong.');
-                console.log(error);
+                console.error('Upload Process Failed:', error);
                 return false;
             })
             .finally(function () {
-                // $events_sess.files.files_uploading_count--;
                 $slct_trigger = 'load__event_file_obj_li';
-
-                // return event_file_id;
             });
 
-        console.log(ae_promises.upload__hosted_file_obj);
-        let hosted_file_result = ae_promises.upload__hosted_file_obj;
-
-        return hosted_file_result;
+        return ae_promises.upload__hosted_file_obj;
     }
 </script>
 
-<!-- class:hidden={!$ae_loc.trusted_access} -->
 <form
     onsubmit={prevent_default(handle_submit_form_files)}
     class="{class_li_default} {class_li}"
 >
     {#await ae_promises.upload__hosted_file_obj}
         <div class="text-lg flex flex-row gap-1 items-center justify-center">
-            <span class="fas fa-spinner fa-spin m-1"></span>
+            <Lucide.Loader2 class="animate-spin m-1" />
             <span class="">
                 Uploading
                 {#if $ae_sess.api_upload_kv[task_id]}
@@ -278,14 +198,14 @@
 
     <div
         class="
-            border-2 hover:border-2 border-dashed border-green-500
-            p-1
-            preset-filled-success-50-950 hover:border-green-800
-            cursor-pointer
+            border-2 hover:border-2 border-dashed border-primary-500
+            p-1 w-full rounded-lg
+            preset-filled-primary-50-950 hover:border-primary-800
+            cursor-pointer transition-colors
             "
     >
         <label
-            for="ae_comp__event_files_upload__input"
+            for={input_element_id}
             class="
             svelte_input_file_label
             text-center
@@ -294,16 +214,13 @@
             class:hidden={$events_sess.files.disable_submit__event_file_obj}
         >
             {#if label}{@render label()}{:else}
-                <div class="text-lg">
-                    <span class="fas fa-upload"></span>
-                    <!-- Select files to upload -->
-                    <!-- <span class="fas fa-file-archive"></span> -->
-                    <strong class="">Upload files</strong>
-                    <!-- (drag and drop) -->
+                <div class="flex items-center justify-center gap-2 mb-2 pt-2">
+                    <Lucide.Upload class="text-primary-500" />
+                    <strong class="preset-tonal-primary px-3 py-1 rounded-full">Select Files</strong>
                 </div>
-                <div class="text-sm text-gray-600 dark:text-gray-400 italic">
-                    <strong>Presentation related files only</strong><br />
-                    (PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)
+                <div class="text-sm text-gray-600 dark:text-gray-400 italic pb-2">
+                    <strong>Presentation materials only</strong><br />
+                    (PPTX, Keynote, PDF, MP4, etc)
                 </div>
             {/if}
         </label>
@@ -342,43 +259,33 @@
         class="
             btn btn-lg
             text-lg
-            preset-tonal-primary hover:preset-tonal-success
+            preset-tonal-primary border border-primary-500 hover:preset-tonal-success hover:border-success-500
             flex items-center justify-center
             w-54
             transition-all
             "
-        class:opacity-20={$events_sess.files.disable_submit__event_file_obj ||
-            $events_sess.files.status__file_list != 'ready'}
         disabled={$events_sess.files.disable_submit__event_file_obj ||
             $events_sess.files.status__file_list != 'ready'}
     >
         {#await ae_promises.upload__hosted_file_obj}
-            <span class="fas fa-spinner fa-spin m-1"></span>
+            <Lucide.Loader2 class="animate-spin m-1" />
             <span class="">
-                Uploading
                 {#if $ae_sess.api_upload_kv[task_id]}
                     {$ae_sess.api_upload_kv[task_id].percent_completed}%
+                {:else}
+                    ...
                 {/if}
             </span>
         {:then}
-            <span class="fas fa-upload m-1"></span>
-            <span class=""> Upload </span>
-            <!-- <span class="fas fa-save m-1"></span> -->
-            <span class="text-sm px-1 font-semibold bg-neutral-500/50 rounded">
-                {#if $events_sess.files.processed_file_list.length > 0}
-                    <!-- {#each $events_sess.files.processed_file_list as file_obj, index}
-                        <span class="text-xs">
-                            {file_obj.filename}
-                        </span>
-                    {/each} -->
-                    {@html $events_sess.files.processed_file_list.length == 1
-                        ? `${$events_sess.files.processed_file_list.length}&times; file`
-                        : `${$events_sess.files.processed_file_list.length}&times; files`}
+            <Lucide.UploadCloud class="m-1" size={20} />
+            <span class="text-sm"> Upload </span>
+            <span class="grow font-bold ml-2">
+                {#if $events_sess.files.processed_file_list?.length > 0}
+                    {$events_sess.files.processed_file_list.length} { $events_sess.files.processed_file_list.length === 1 ? 'file' : 'files' }
                 {:else}
-                    <span class="text-xs"> No files selected </span>
+                    <span class="text-xs"> 0 </span>
                 {/if}
-                <!-- Files -->
             </span>
         {/await}
     </button>
-</form>
+</form>
\ No newline at end of file