feat(hosted-files): introduce standardized download component and V3 action support
- Created AE_Comp_Hosted_Files_Download_Button using Svelte 5 and Lucide icons. - Added file_extension_icon_lucide utility for direct Lucide icon mapping. - Refactored download logic to core__hosted_files.ts using V3 Action endpoint (/v3/action/hosted_file/.../download). - Integrated new component into Event File Object Table. - Cleaned up legacy window.postMessage calls in several file management views. NOTE: The new download component is currently in development and may not be fully functional.
This commit is contained in:
Scott Idem
@@ -224,7 +224,6 @@
|
||||
log_lvl: 0
|
||||
});
|
||||
|
||||
// window.postMessage({ type: 'download_event_file', hosted_file_id: idaa_archive_content_obj.hosted_file_id, filename: idaa_archive_content_obj.filename, auto_download: true }, '*');
|
||||
}}
|
||||
class:hidden={!$ae_loc.edit_mode}
|
||||
class="novi_btn btn btn-sm lg:btn-md preset-tonal-primary hover:preset-filled-primary-500 min-w-72 lg:min-w-96"
|
||||
|
||||
@@ -60,7 +60,6 @@
|
||||
log_lvl: log_lvl
|
||||
});
|
||||
|
||||
// window.postMessage({ type: 'download_event_file', hosted_file_id: idaa_archive_content_obj.hosted_file_id, filename: idaa_archive_content_obj.filename, auto_download: true }, '*');
|
||||
}}
|
||||
class="novi_btn btn btn-sm lg:btn-md preset-tonal-primary hover:preset-filled-primary-500 min-w-72 lg:min-w-96"
|
||||
title={`Download this file:\n${hosted_file_obj.filename}\n[API] SHA256: ${hosted_file_obj?.hash_sha256?.slice(0, 10)}... Hosted ID: ${hosted_file_obj.hosted_file_id}`}
|
||||
|
||||
141
src/lib/ae_core/ae_comp__hosted_files_download_button.svelte
Normal file
141
src/lib/ae_core/ae_comp__hosted_files_download_button.svelte
Normal file
@@ -0,0 +1,141 @@
|
||||
<script lang="ts">
|
||||
// *** Import Svelte specific
|
||||
import * as Lucide from 'lucide-svelte';
|
||||
|
||||
// *** Import Aether specific variables and functions
|
||||
import type { key_val } from '$lib/stores/ae_stores';
|
||||
import { ae_util } from '$lib/ae_utils/ae_utils';
|
||||
import { download_ae_obj_id__hosted_file } from '$lib/ae_core/core__hosted_files';
|
||||
import {
|
||||
ae_loc,
|
||||
ae_sess,
|
||||
ae_api
|
||||
} from '$lib/stores/ae_stores';
|
||||
|
||||
interface Props {
|
||||
log_lvl?: number;
|
||||
hosted_file_id: null | string;
|
||||
hosted_file_obj: null | key_val;
|
||||
filename?: null | string;
|
||||
max_length?: number;
|
||||
auto_download?: boolean;
|
||||
linked_to_type?: null | string;
|
||||
linked_to_id?: null | string;
|
||||
download_complete?: null | boolean;
|
||||
download_percent?: number;
|
||||
download_status_msg?: string;
|
||||
classes?: string;
|
||||
label?: import('svelte').Snippet;
|
||||
}
|
||||
|
||||
let {
|
||||
log_lvl = 0,
|
||||
hosted_file_id,
|
||||
hosted_file_obj,
|
||||
filename = $bindable(null),
|
||||
max_length = $bindable(30),
|
||||
auto_download = true,
|
||||
linked_to_type = $bindable(null),
|
||||
linked_to_id = $bindable(null),
|
||||
download_complete = $bindable(),
|
||||
download_percent = $bindable(),
|
||||
download_status_msg = $bindable('Not started'),
|
||||
classes = 'btn btn-sm lg:btn-md preset-tonal-primary border border-primary-500 hover:preset-filled-primary-500 min-w-48',
|
||||
label
|
||||
}: Props = $props();
|
||||
|
||||
$effect(() => {
|
||||
if (log_lvl) {
|
||||
console.log(
|
||||
`ae_comp__hosted_files_download_button.svelte hosted_file_id=${hosted_file_id}`,
|
||||
hosted_file_obj
|
||||
);
|
||||
}
|
||||
});
|
||||
|
||||
let ae_promises: key_val = $state({});
|
||||
|
||||
$effect(() => {
|
||||
const file_id = hosted_file_obj?.id || hosted_file_obj?.hosted_file_id || hosted_file_id;
|
||||
if (file_id && $ae_sess?.api_download_kv[file_id]?.percent_completed) {
|
||||
download_percent =
|
||||
$ae_sess.api_download_kv[file_id].percent_completed;
|
||||
}
|
||||
});
|
||||
</script>
|
||||
|
||||
{#if hosted_file_id && hosted_file_obj}
|
||||
{@const file_id = hosted_file_obj.id || hosted_file_obj.hosted_file_id || hosted_file_id}
|
||||
<button
|
||||
type="button"
|
||||
disabled={!$ae_loc.trusted_access}
|
||||
class={classes ?? 'btn'}
|
||||
onclick={() => {
|
||||
download_complete = false;
|
||||
download_status_msg = 'Downloading...';
|
||||
ae_promises[file_id] = download_ae_obj_id__hosted_file({
|
||||
api_cfg: $ae_api,
|
||||
hosted_file_id: file_id,
|
||||
return_file: true,
|
||||
filename: filename ?? hosted_file_obj.filename,
|
||||
auto_download: auto_download,
|
||||
log_lvl: log_lvl
|
||||
})
|
||||
.then((result) => {
|
||||
if (result === null) {
|
||||
console.log('File not found (404)');
|
||||
download_complete = null;
|
||||
download_status_msg = 'File not found';
|
||||
} else if (result === false) {
|
||||
console.log(
|
||||
'Possible error with API server (check network and server status)'
|
||||
);
|
||||
download_complete = false;
|
||||
download_status_msg = 'Failed to download';
|
||||
} else {
|
||||
// console.log('File found and downloaded');
|
||||
download_complete = true;
|
||||
download_status_msg = 'File downloaded';
|
||||
}
|
||||
return result;
|
||||
});
|
||||
}}
|
||||
title={`Download this file:\n${filename ?? hosted_file_obj?.filename}\n[API] SHA256: ${hosted_file_obj?.hash_sha256?.slice(0, 10)}...\nHosted ID: ${file_id}\n Linked to: ${linked_to_type} ID: ${linked_to_id}`}
|
||||
>
|
||||
{#await ae_promises[file_id]}
|
||||
<Lucide.Loader2 class="animate-spin mr-2" size={18} />
|
||||
<span class="">
|
||||
Downloading
|
||||
{#if $ae_sess.api_download_kv[file_id]}
|
||||
{$ae_sess.api_download_kv[file_id]
|
||||
.percent_completed}%
|
||||
{/if}
|
||||
:
|
||||
</span>
|
||||
{:then}
|
||||
{#if label}
|
||||
{@render label()}
|
||||
{:else}
|
||||
{@const IconComp = ae_util.file_extension_icon_lucide(hosted_file_obj?.extension)}
|
||||
<IconComp size={18} class="mr-2" />
|
||||
<span class="grow">
|
||||
{ae_util.shorten_filename({
|
||||
filename: filename ?? hosted_file_obj?.filename,
|
||||
max_length: max_length
|
||||
})}
|
||||
</span>
|
||||
{/if}
|
||||
{/await}
|
||||
|
||||
{#if download_complete === null}
|
||||
<span class="text-red-800 dark:text-red-200 ml-2">File not found</span>
|
||||
{:else if download_complete === false}
|
||||
<span class="text-red-800 dark:text-red-200 ml-2">Failed to download!</span>
|
||||
{/if}
|
||||
</button>
|
||||
{:else}
|
||||
<button type="button" disabled class={classes ?? 'btn'} title="No file selected">
|
||||
<Lucide.FileX size={18} class="mr-2" />
|
||||
<span class="grow"> No file info </span>
|
||||
</button>
|
||||
{/if}
|
||||
@@ -180,6 +180,53 @@ export async function delete_ae_obj_id__hosted_file({
|
||||
return result;
|
||||
}
|
||||
|
||||
/**
|
||||
* Download a hosted file (V3 Action)
|
||||
* Uses the new /v3/action/... standard.
|
||||
* Updated 2026-02-03
|
||||
*/
|
||||
export async function download_ae_obj_id__hosted_file({
|
||||
api_cfg,
|
||||
hosted_file_id,
|
||||
return_file = true,
|
||||
filename,
|
||||
auto_download = false,
|
||||
params = {},
|
||||
log_lvl = 0
|
||||
}: {
|
||||
api_cfg: any;
|
||||
hosted_file_id: string;
|
||||
return_file?: boolean;
|
||||
filename?: string;
|
||||
auto_download?: boolean;
|
||||
params?: key_val;
|
||||
log_lvl?: number;
|
||||
}) {
|
||||
if (log_lvl) {
|
||||
console.log(`*** download_ae_obj_id__hosted_file() *** id=${hosted_file_id}`);
|
||||
}
|
||||
|
||||
const task_id = hosted_file_id;
|
||||
const endpoint = `/v3/action/hosted_file/${hosted_file_id}/download`;
|
||||
|
||||
const query_params: key_val = { ...params };
|
||||
if (filename) {
|
||||
query_params['filename'] = filename;
|
||||
}
|
||||
query_params['return_file'] = 'true'; // V3 prefers string 'true' for bool flags in query
|
||||
|
||||
return await api.get_object({
|
||||
api_cfg,
|
||||
endpoint,
|
||||
params: query_params,
|
||||
return_blob: return_file,
|
||||
filename,
|
||||
auto_download,
|
||||
task_id,
|
||||
log_lvl
|
||||
});
|
||||
}
|
||||
|
||||
export const properties_to_save = [
|
||||
'id',
|
||||
'hosted_file_id',
|
||||
|
||||
Reference in New Issue
Block a user