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

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

@@ -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>