From 64c3afe564c89c47c370b88a2c5927b10710f112 Mon Sep 17 00:00:00 2001 From: Scott Idem Date: Thu, 7 May 2026 17:33:12 -0400 Subject: [PATCH] Clean up hosted files upload component Guard task_id effect against resetting mid-upload; add prevent_default wrapper; add 20-min timeout for large video/audio files; add null result guard before result[0]; fix for= attribute to use variable; console.error on failure; remove dead params/comments. Co-Authored-By: Claude Sonnet 4.6 --- .../ae_comp__hosted_files_upload.svelte | 194 ++++++------------ 1 file changed, 67 insertions(+), 127 deletions(-) diff --git a/src/lib/ae_core/ae_comp__hosted_files_upload.svelte b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte index 25dbe64b..5611c67e 100644 --- a/src/lib/ae_core/ae_comp__hosted_files_upload.svelte +++ b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte @@ -49,7 +49,7 @@ let { input_name = 'file_list', multiple = true, required = true, - accept = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh', + accept = 'audio/*, image/*, video/*, .bak, .cfg, .css, .csv, .doc, .docx, .gz, .htm, .html, .ini, .iso, .j2, .json, .key, .keynote, .md, .pdf, .ppt, .pptx, .rar, .rtf, .sql, .svelte, .ttf, .txt, .xls, .xlsx, .xz, .zip, .bin, .dmg, .exe, .js, .msi, .php, .py, .sh', class_li_default = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1', class_li = '', input_class_li = ['file_drop_area'], @@ -66,7 +66,7 @@ let { let task_id: string = $state(''); let input_file_list: any = $state(null); let ae_promises: key_val = $state({}); // Promise; -let ae_triggers: key_val = {}; +// let ae_triggers: key_val = {}; let input_element_id = 'ae_comp__hosted_files_upload__input'; @@ -78,18 +78,22 @@ $effect(() => { }); $effect(() => { - // Sync task_id with link_to_id prop so it resets when navigating to a different object. - task_id = link_to_id; + // Only sync task_id when idle — don't reset during an in-flight upload. + if (!ae_promises.upload__hosted_file_obj) { + task_id = link_to_id; + } }); +function prevent_default(fn: (event: T) => void) { + return function (event: T) { + event.preventDefault(); + fn(event); + }; +} + // *** Functions and Logic async function handle_submit_form_files(event: SubmitEvent) { - console.log('*** handle_submit_form() ***'); - event.preventDefault(); - - if (!event) { - return; - } + if (log_lvl) console.log('*** handle_submit_form() ***'); $ae_sess.files.disable_submit__hosted_file_obj = true; $ae_sess.files.submit_status = 'saving'; @@ -113,42 +117,17 @@ async function handle_submit_form_files(event: SubmitEvent) { file_input.files && file_input.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 < file_input.files.length; i++) { - let tmp_file = file_input.files[i]; - task_id = $ae_sess.files.processed_file_list[i].hash_sha256; - - // hosted_file_results = await handle_input_upload_files([tmp_file], task_id); hosted_file_results = await handle_input_upload_files({ - input_upload_files: [tmp_file], + input_upload_files: [file_input.files[i]], 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); - } + if (log_lvl > 1) console.log('hosted_file_results:', hosted_file_results); } - // hosted_file_results = await handle_input_upload_files(event.target[input_element_id].files, task_id); $ae_sess.files.processed_file_list = []; - $ae_sess = $ae_sess; // Is this needed? 2025-03-17 target.reset(); - // await tick(); - - if (log_lvl) { - console.log( - `hosted_file_id_li: ${hosted_file_id_li}`, - hosted_file_id_li - ); - } else if (log_lvl > 1) { - console.log('hosted_file_results:', hosted_file_results); - } + if (log_lvl) console.log('hosted_file_id_li:', hosted_file_id_li); } $ae_sess.files.disable_submit__hosted_file_obj = false; @@ -164,120 +143,71 @@ async function handle_input_upload_files({ input_upload_files: any[]; task_id: string; }) { - console.log('*** handle_input_upload_files() ***'); + if (log_lvl) console.log('*** handle_input_upload_files() ***'); 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); - for (let i = 0; i < input_upload_files.length; i++) { - form_data.append(`file_list`, input_upload_files[i]); + form_data.append('file_list', input_upload_files[i]); } - // hash_sha256, uploaded, uploaded_bytes - // $ae_sess.files.processed_file_list[i] = { - // ...$ae_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 = '/v3/action/hosted_file/upload'; - - 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 + // Promise assigned to state so {#await ae_promises.upload__hosted_file_obj} in the + // template can track it. Using await here instead would hide the promise from the template. ae_promises.upload__hosted_file_obj = api .post_object({ api_cfg: $ae_api, - endpoint: endpoint, - // params: params, + endpoint: '/v3/action/hosted_file/upload', form_data: form_data, + timeout: 1200000, // 20 min — large video/audio files task_id: task_id, log_lvl: log_lvl - // retry_count: 1, }) - .then(async function (result) { - // WARNING!!!! ONLY ONE FILE IS EXPECTED TO BE UPLOADED AT A TIME!!! - // NOTE: The upload endpoint always returns a list of successfully uploaded files. In this case we are only uploading one file and expecting a list of one item. - let x = 0; - console.log(result[x]); - let hosted_file_obj = result[x]; - - let hosted_file_id = hosted_file_obj.hosted_file_id; + .then(function (result) { + // Endpoint always returns a list; we upload one file at a time. + if (!result || !result[0]) { + console.error('Upload failed — no result returned.'); + return false; + } + const hosted_file_obj = result[0]; + const hosted_file_id = hosted_file_obj.hosted_file_id; hosted_file_id_li.push(hosted_file_id); hosted_file_obj_li.push(hosted_file_obj); - let hosted_file_data: key_val = {}; - hosted_file_data['id'] = hosted_file_id; // Same as the hosted_file_id - hosted_file_data['hosted_file_id'] = hosted_file_id; - hosted_file_data['for_type'] = link_to_type; - hosted_file_data['for_id'] = link_to_id; - hosted_file_data['hash_sha256'] = hosted_file_obj.hash_sha256; - hosted_file_data['filename'] = hosted_file_obj.filename; - hosted_file_data['extension'] = hosted_file_obj.extension; - hosted_file_data['content_type'] = hosted_file_obj.content_type; - hosted_file_data['size'] = hosted_file_obj.size; - hosted_file_data['enable'] = true; - hosted_file_data['created_on'] = hosted_file_obj.created_on; - hosted_file_data['updated_on'] = hosted_file_obj.updated_on; - console.log(hosted_file_data); - + const hosted_file_data: key_val = { + id: hosted_file_id, + hosted_file_id: hosted_file_id, + for_type: link_to_type, + for_id: link_to_id, + hash_sha256: hosted_file_obj.hash_sha256, + filename: hosted_file_obj.filename, + extension: hosted_file_obj.extension, + content_type: hosted_file_obj.content_type, + size: hosted_file_obj.size, + enable: true, + created_on: hosted_file_obj.created_on, + updated_on: hosted_file_obj.updated_on + }; hosted_file_obj_kv[hosted_file_id] = hosted_file_data; - - if (log_lvl) { - console.log(`hosted_file_data:`, hosted_file_data); - } - + if (log_lvl) console.log('hosted_file_data:', hosted_file_data); return hosted_file_data; - - // $ae_sess.files.new_upload_list[i].uploaded_bytes = 10; // fake 10 bytes at least... - - // let event_file_id = await events_func.create_hosted_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 (hosted_file_data) { - // return hosted_file_data; - // }) .catch(function (error: any) { - console.log('Something went wrong.'); - console.log(error); + console.error('Upload failed:', error); return false; }) .finally(function () { $slct_trigger = 'load__hosted_file_obj_li'; }); - if (log_lvl) { - console.log(`Waiting for upload__hosted_file_obj promise...`); - } - let hosted_file_result = ae_promises.upload__hosted_file_obj; - - return hosted_file_result; + return ae_promises.upload__hosted_file_obj; } -
+ {#await ae_promises.upload__hosted_file_obj}
@@ -291,7 +221,7 @@ async function handle_input_upload_files({ {/await}