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 <noreply@anthropic.com>
This commit is contained in:
Scott Idem
@@ -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<any>;
|
||||
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<T extends Event>(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;
|
||||
}
|
||||
</script>
|
||||
|
||||
<!-- class:hidden={!$ae_loc.trusted_access} -->
|
||||
<form onsubmit={handle_submit_form_files} class="{class_li_default} {class_li}">
|
||||
<form onsubmit={prevent_default(handle_submit_form_files)} class="{class_li_default} {class_li}">
|
||||
{#await ae_promises.upload__hosted_file_obj}
|
||||
<div class="flex flex-row items-center justify-center gap-1 text-lg">
|
||||
<Lucide.LoaderCircle class="m-1 animate-spin" />
|
||||
@@ -291,7 +221,7 @@ async function handle_input_upload_files({
|
||||
{/await}
|
||||
|
||||
<label
|
||||
for="ae_comp__hosted_files_upload__input"
|
||||
for={input_element_id}
|
||||
class="svelte_input_file_label text-center"
|
||||
class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}>
|
||||
{#if label}{@render label()}{:else}
|
||||
@@ -337,9 +267,19 @@ async function handle_input_upload_files({
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-lg btn-primary preset-tonal-primary border-primary-500 hover:preset-tonal-success hover:border-success-500 w-54 border"
|
||||
class="
|
||||
btn btn-lg btn-primary
|
||||
preset-tonal-primary
|
||||
border border-primary-500
|
||||
hover:preset-tonal-success hover:border-success-500
|
||||
w-54
|
||||
transition-all
|
||||
"
|
||||
class:opacity-30={$ae_sess.files.disable_submit__hosted_file_obj ||
|
||||
$ae_sess.files.status__file_list != 'ready'}
|
||||
disabled={$ae_sess.files.disable_submit__hosted_file_obj ||
|
||||
$ae_sess.files.status__file_list != 'ready'}>
|
||||
$ae_sess.files.status__file_list != 'ready'}
|
||||
>
|
||||
{#await ae_promises.upload__hosted_file_obj}
|
||||
<Lucide.LoaderCircle class="m-1 animate-spin" />
|
||||
<span class="">
|
||||
@@ -350,18 +290,18 @@ async function handle_input_upload_files({
|
||||
{/if}
|
||||
</span>
|
||||
{:then}
|
||||
<Lucide.UploadCloud class="m-1" size={20} />
|
||||
<Lucide.CloudUpload class="m-1" size={20} />
|
||||
<span class="text-sm"> Upload </span>
|
||||
{#if $ae_sess.files.processed_file_list?.length > 0}
|
||||
<span class="ml-2 grow font-bold">
|
||||
{#if $ae_sess.files.processed_file_list?.length > 0}
|
||||
{$ae_sess.files.processed_file_list.length}
|
||||
{$ae_sess.files.processed_file_list.length === 1
|
||||
? 'file'
|
||||
: 'files'}
|
||||
{:else}
|
||||
<span class="text-xs"> 0 </span>
|
||||
{/if}
|
||||
</span>
|
||||
{:else}
|
||||
<span class="text-xs"> none </span>
|
||||
{/if}
|
||||
{/await}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
Reference in New Issue
Block a user