Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

refactor(events): modernize event files upload component

Browse Source 
- 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.
This commit is contained in:
Scott Idem
2026-02-06 15:43:03 -05:00
parent ec363f16fc
commit 433862ad00
1 changed files with 97 additions and 190 deletions
Download Patch File Download Diff File Expand all files Collapse all files

285
src/routes/events/ae_comp__event_files_upload.svelte
View File

@@ -1,4 +1,31 @@
<script lang="ts"> <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 { interface Props {
log_lvl?: number; log_lvl?: number;
// Expecting these for link_to_type: 'event', 'event_location', 'event_presentation', 'event_presenter', 'event_session' // Expecting these for link_to_type: 'event', 'event_location', 'event_presentation', 'event_presenter', 'event_session'
@@ -34,43 +61,12 @@
label label
}: Props = $props(); }: 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 // Local Variables
let task_id = $state(link_to_id); let task_id = $state(link_to_id);
let input_file_list: any = $state(null); let input_file_list: any = $state(null);
let ae_promises: key_val = $state({}); // Promise<any>; let ae_promises: key_val = $state({});
let ae_triggers: key_val = {};
let input_element_id = 'ae_comp__event_files_upload__input'; let input_element_id = 'ae_comp__event_files_upload__input';
// *** Functions and Logic
function prevent_default<T extends Event>(fn: (event: T) => void) { function prevent_default<T extends Event>(fn: (event: T) => void) {
return function (event: T) { return function (event: T) {
event.preventDefault(); event.preventDefault();
@@ -79,49 +75,34 @@
} }
async function handle_submit_form_files(event: SubmitEvent) { 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.disable_submit__event_file_obj = true;
$events_sess.files.submit_status = 'saving'; $events_sess.files.submit_status = 'saving';
submit_status = 'saving'; submit_status = 'saving';
upload_complete = false; upload_complete = false;
let hosted_file_results; const target = event.currentTarget as HTMLFormElement;
const file_input = target ? (target[input_element_id] as HTMLInputElement) : null;
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];
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; task_id = $events_sess.files.processed_file_list[i].hash_sha256;
hosted_file_results = await handle_input_upload_files( await handle_input_upload_files({
[tmp_file], input_upload_files: [tmp_file],
task_id task_id: task_id
); });
if (hosted_file_results) {
console.log(`hosted_file_results:`, hosted_file_results);
} else {
console.log(`hosted_file_results:`, hosted_file_results);
}
} }
// 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.files.processed_file_list = [];
$events_sess = $events_sess; target.reset();
event.target.reset();
// await tick();
db_events.file.clear();
// Refresh Local Cache (Optimistic Revalidation)
await db_events.file.clear();
events_func.load_ae_obj_li__event_file({ events_func.load_ae_obj_li__event_file({
api_cfg: $ae_api, api_cfg: $ae_api,
for_obj_type: link_to_type, for_obj_type: link_to_type,
@@ -138,16 +119,16 @@
upload_complete = true; upload_complete = true;
} }
async function handle_input_upload_files(input_upload_files, task_id) { async function handle_input_upload_files({
log_lvl = 0; input_upload_files,
if (log_lvl) { task_id
console.log( }: {
`*** handle_input_upload_files() *** task_id = ${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(); const form_data = new FormData();
form_data.append('account_id', $ae_loc.account_id); form_data.append('account_id', $ae_loc.account_id);
form_data.append('link_to_type', link_to_type); form_data.append('link_to_type', link_to_type);
form_data.append('link_to_id', link_to_id); form_data.append('link_to_id', link_to_id);
@@ -156,117 +137,56 @@
form_data.append(`file_list`, input_upload_files[i]); form_data.append(`file_list`, input_upload_files[i]);
} }
// hash_sha256, uploaded, uploaded_bytes // STEP 1: Upload to Hosted Files
// $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
ae_promises.upload__hosted_file_obj = api ae_promises.upload__hosted_file_obj = api
.post_object({ .post_object({
api_cfg: $ae_api, api_cfg: $ae_api,
endpoint: endpoint, endpoint: '/hosted_file/upload_files',
// params: params,
form_data: form_data, form_data: form_data,
task_id: task_id, task_id: task_id,
log_lvl: log_lvl log_lvl: log_lvl
// retry_count: 1,
}) })
.then(async function (result) { .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!!! const event_file_data: key_val = {
// 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. hosted_file_id: hosted_file_id,
let x = 0; for_type: link_to_type,
if (log_lvl) { for_id: link_to_id,
console.log(`result = `, result[x]); filename: hosted_file_obj.filename,
} extension: hosted_file_obj.extension,
let hosted_file_obj = result[x]; enable: true
};
let hosted_file_id = hosted_file_obj.hosted_file_id; // STEP 2: Create Event File Link
return await events_func.create_event_file_obj_from_hosted_file_async({
let event_file_data: key_val = {}; api_cfg: $ae_api,
event_file_data['hosted_file_id'] = hosted_file_id; hosted_file_id: hosted_file_id,
event_file_data['for_type'] = link_to_type; data: event_file_data,
event_file_data['for_id'] = link_to_id; log_lvl: log_lvl
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;
}) })
.catch(function (error: any) { .catch(function (error: any) {
console.log('Something went wrong.'); console.error('Upload Process Failed:', error);
console.log(error);
return false; return false;
}) })
.finally(function () { .finally(function () {
// $events_sess.files.files_uploading_count--;
$slct_trigger = 'load__event_file_obj_li'; $slct_trigger = 'load__event_file_obj_li';
// return event_file_id;
}); });
console.log(ae_promises.upload__hosted_file_obj); return ae_promises.upload__hosted_file_obj;
let hosted_file_result = ae_promises.upload__hosted_file_obj;
return hosted_file_result;
} }
</script> </script>
<!-- class:hidden={!$ae_loc.trusted_access} -->
<form <form
onsubmit={prevent_default(handle_submit_form_files)} onsubmit={prevent_default(handle_submit_form_files)}
class="{class_li_default} {class_li}" class="{class_li_default} {class_li}"
> >
{#await ae_promises.upload__hosted_file_obj} {#await ae_promises.upload__hosted_file_obj}
<div class="text-lg flex flex-row gap-1 items-center justify-center"> <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=""> <span class="">
Uploading Uploading
{#if $ae_sess.api_upload_kv[task_id]} {#if $ae_sess.api_upload_kv[task_id]}
@@ -278,14 +198,14 @@
<div <div
class=" class="
border-2 hover:border-2 border-dashed border-green-500 border-2 hover:border-2 border-dashed border-primary-500
p-1 p-1 w-full rounded-lg
preset-filled-success-50-950 hover:border-green-800 preset-filled-primary-50-950 hover:border-primary-800
cursor-pointer cursor-pointer transition-colors
" "
> >
<label <label
for="ae_comp__event_files_upload__input" for={input_element_id}
class=" class="
svelte_input_file_label svelte_input_file_label
text-center text-center
@@ -294,16 +214,13 @@
class:hidden={$events_sess.files.disable_submit__event_file_obj} class:hidden={$events_sess.files.disable_submit__event_file_obj}
> >
{#if label}{@render label()}{:else} {#if label}{@render label()}{:else}
<div class="text-lg"> <div class="flex items-center justify-center gap-2 mb-2 pt-2">
<span class="fas fa-upload"></span> <Lucide.Upload class="text-primary-500" />
<!-- Select files to upload --> <strong class="preset-tonal-primary px-3 py-1 rounded-full">Select Files</strong>
<!-- <span class="fas fa-file-archive"></span> -->
<strong class="">Upload files</strong>
<!-- (drag and drop) -->
</div> </div>
<div class="text-sm text-gray-600 dark:text-gray-400 italic"> <div class="text-sm text-gray-600 dark:text-gray-400 italic pb-2">
<strong>Presentation related files only</strong><br /> <strong>Presentation materials only</strong><br />
(PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc) (PPTX, Keynote, PDF, MP4, etc)
</div> </div>
{/if} {/if}
</label> </label>
@@ -342,42 +259,32 @@
class=" class="
btn btn-lg btn btn-lg
text-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 flex items-center justify-center
w-54 w-54
transition-all 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 || disabled={$events_sess.files.disable_submit__event_file_obj ||
$events_sess.files.status__file_list != 'ready'} $events_sess.files.status__file_list != 'ready'}
> >
{#await ae_promises.upload__hosted_file_obj} {#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=""> <span class="">
Uploading
{#if $ae_sess.api_upload_kv[task_id]} {#if $ae_sess.api_upload_kv[task_id]}
{$ae_sess.api_upload_kv[task_id].percent_completed}% {$ae_sess.api_upload_kv[task_id].percent_completed}%
{:else}
...
{/if} {/if}
</span> </span>
{:then} {:then}
<span class="fas fa-upload m-1"></span> <Lucide.UploadCloud class="m-1" size={20} />
<span class=""> Upload </span> <span class="text-sm"> Upload </span>
<!-- <span class="fas fa-save m-1"></span> --> <span class="grow font-bold ml-2">
<span class="text-sm px-1 font-semibold bg-neutral-500/50 rounded"> {#if $events_sess.files.processed_file_list?.length > 0}
{#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' }
<!-- {#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`}
{:else} {:else}
<span class="text-xs"> No files selected </span> <span class="text-xs"> 0 </span>
{/if} {/if}
<!-- Files -->
</span> </span>
{/await} {/await}
</button> </button>