From b93cacdfccac2da274c03f7e12c2e191778ecaa8 Mon Sep 17 00:00:00 2001
From: Scott Idem <stidem@gmail.com>
Date: Thu, 7 Nov 2024 19:34:57 -0500
Subject: [PATCH] Wrapping up for the day. File uploads and deletes pretty much
 work now. Need to figure out whey the form does not refresh or just ignore?

---
 .../ae_archives__archive_content.ts           |  18 +-
 .../ae_comp__hosted_files_upload.svelte       | 305 ++++++++++++++++++
 src/lib/ae_core/ae_core_functions.ts          |   5 +
 src/lib/ae_core/core__hosted_files.ts         |  59 ++++
 src/lib/ae_stores.ts                          |   7 +
 ...a_comp__archive_content_obj_id_edit.svelte | 153 ++++++++-
 ...e_idaa_comp__archive_content_obj_li.svelte |  16 +-
 .../ae_idaa_comp__archive_obj_id_view.svelte  |   2 +
 .../ae_idaa_comp__media_player.svelte         |   2 +-
 9 files changed, 540 insertions(+), 27 deletions(-)
 create mode 100644 src/lib/ae_core/ae_comp__hosted_files_upload.svelte
 create mode 100644 src/lib/ae_core/core__hosted_files.ts

diff --git a/src/lib/ae_archives/ae_archives__archive_content.ts b/src/lib/ae_archives/ae_archives__archive_content.ts
index ccb6ef3d..1c776664 100644
--- a/src/lib/ae_archives/ae_archives__archive_content.ts
+++ b/src/lib/ae_archives/ae_archives__archive_content.ts
@@ -33,11 +33,11 @@ export async function load_ae_obj_id__archive_content(
         params: params,
         log_lvl: log_lvl
         })
-    .then(function (archive_content_obj_get_result) {
+    .then(async function (archive_content_obj_get_result) {
         if (archive_content_obj_get_result) {
             if (try_cache) {
                 // This is expecting a list
-                db_save_ae_obj_li__archive_content({
+                await db_save_ae_obj_li__archive_content({
                     obj_type: 'archive_content',
                     obj_li: [archive_content_obj_get_result]
 
@@ -104,10 +104,10 @@ export async function load_ae_obj_li__archive_content(
         params: params,
         log_lvl: log_lvl
         })
-    .then(function (archive_content_obj_li_get_result) {
+    .then(async function (archive_content_obj_li_get_result) {
         if (archive_content_obj_li_get_result) {
             if (try_cache) {
-                db_save_ae_obj_li__archive_content({
+                await db_save_ae_obj_li__archive_content({
                     obj_type: 'archive_content', obj_li: archive_content_obj_li_get_result
                 });
             }
@@ -158,9 +158,9 @@ export async function create_ae_obj__archive_content(
         return_obj: true,
         log_lvl: log_lvl
     })
-    .then(function (archive_content_obj_create_result) {
+    .then(async function (archive_content_obj_create_result) {
         if (archive_content_obj_create_result) {
-            db_save_ae_obj_li__archive_content(
+            await db_save_ae_obj_li__archive_content(
                 {
                     obj_type: 'archive_content',
                     obj_li: [archive_content_obj_create_result]
@@ -214,10 +214,10 @@ export async function update_ae_obj__archive_content(
         return_obj: true,
         log_lvl: log_lvl
         })
-    .then(function (archive_content_obj_update_result) {
+    .then(async function (archive_content_obj_update_result) {
         if (archive_content_obj_update_result) {
             if (try_cache) {
-                db_save_ae_obj_li__archive_content({
+                await db_save_ae_obj_li__archive_content({
                     obj_type: 'archive_content', obj_li: [archive_content_obj_update_result]
                 });
             }
@@ -241,7 +241,7 @@ export async function update_ae_obj__archive_content(
 
 // This function will loop through the archive_content_obj_li and save each one to the DB.
 // Updated 2024-09-25
-export function db_save_ae_obj_li__archive_content(
+export async function db_save_ae_obj_li__archive_content(
         {
             obj_type,
             obj_li,
diff --git a/src/lib/ae_core/ae_comp__hosted_files_upload.svelte b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte
new file mode 100644
index 00000000..2d936458
--- /dev/null
+++ b/src/lib/ae_core/ae_comp__hosted_files_upload.svelte
@@ -0,0 +1,305 @@
+<script lang="ts">
+export let log_lvl: number = 0;
+
+// Imports
+// Import components and elements
+import Element_input_files_tbl from '$lib/element_input_files_tbl.svelte';
+
+// Import storage, functions, and libraries
+import type { key_val } from '$lib/ae_stores';
+
+import { api } from '$lib/api';
+import { ae_snip, ae_loc, ae_sess, ae_api, ae_trig, slct, slct_trigger } from '$lib/ae_stores';
+
+// Exports
+// Expecting these for link_to_type: 'event', 'event_location', 'archive_content', etc
+export let link_to_type: string;
+export let link_to_id: string;
+
+export let input_name = 'file_list';
+export let multiple: boolean = true;
+export let required: boolean = true;
+export let accept: string = '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';
+
+export let class_li_default: string = 'flex flex-col gap-1 items-center justify-center w-full max-w-2xl mx-auto my-1';
+export let class_li: string = '';
+export let input_class_li: string[] = ['file_drop_area'];
+export let table_class_li: string[] = ['table', 'table-sm', 'table-striped', 'table-hover' , 'text-sm'];
+
+export let upload_complete: boolean = false;
+export let submit_status: null|string = null;
+
+export let hosted_file_id_li: string[] = [];
+export let hosted_file_obj_li: any[] = [];
+
+
+// Local Variables
+let task_id = link_to_id;
+let input_file_list: any = null;
+let ae_promises: key_val = {}; // Promise<any>;
+let ae_triggers: key_val = {};
+
+let input_element_id = 'ae_comp__hosted_files_upload__input';
+
+// Functions and Logic
+async function handle_submit_form_files(event) {
+    console.log('*** handle_submit_form() ***');
+
+    $ae_sess.files.disable_submit__hosted_file_obj = true;
+    $ae_sess.files.submit_status = 'saving';
+    submit_status = 'saving';
+    upload_complete = false;
+
+    hosted_file_id_li = [];
+    hosted_file_obj_li = [];
+
+    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];
+
+            task_id = $ae_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);
+            }
+        }
+        // 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;
+        event.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);
+        }
+
+        // db_events.files.clear();
+
+        // let params = {
+        //     qry__enabled: 'all',
+        //     qry__hidden: 'all',
+        // }
+
+        // events_func.load_ae_obj_li__event_file({
+        //     api_cfg: $ae_api,
+        //     for_obj_type: link_to_type,
+        //     for_obj_id: link_to_id,
+        //     params: params,
+        //     try_cache: true
+        // });
+    }
+
+    $ae_sess.files.disable_submit__hosted_file_obj = false;
+    $ae_sess.files.submit_status = 'saved';
+    submit_status = 'saved';
+    upload_complete = true;
+}
+
+
+async function handle_input_upload_files(input_upload_files, task_id) {
+    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]);
+    }
+
+    // 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 = '/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.post_object({
+        api_cfg: $ae_api,
+        endpoint: endpoint,
+        params: params,
+        form_data: form_data,
+        task_id: task_id,
+        log_lvl: log_lvl
+    })
+    .then(async function (result) {
+        // 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;
+        console.log(result[x]);
+        let hosted_file_obj = result[x];
+
+        let hosted_file_id = hosted_file_obj.hosted_file_id_random;
+
+        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['hosted_file_id_random'] = hosted_file_id;
+        hosted_file_data['for_type'] = link_to_type;
+        hosted_file_data['for_id_random'] = link_to_id;
+        hosted_file_data['filename'] = hosted_file_obj.filename;
+        hosted_file_data['extension'] = hosted_file_obj.extension;
+        hosted_file_data['enable'] = true;
+        console.log(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) {
+        console.log('Something went wrong.');
+        console.log(error);
+        return false;
+    })
+    .finally( function () {
+        $slct_trigger = 'load__hosted_file_obj_li';
+    });
+
+    console.log(ae_promises.upload__hosted_file_obj);
+    let hosted_file_result = ae_promises.upload__hosted_file_obj;
+
+    return hosted_file_result;
+}
+
+</script>
+
+
+<!-- class:hidden={!$ae_loc.trusted_access} -->
+<form
+    on:submit|preventDefault={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>
+        <span class="">
+            Uploading
+            {#if $ae_sess.api_upload_kv[task_id]}
+                {$ae_sess.api_upload_kv[task_id].percent_completed}%
+            {/if}
+        </span>
+    </div>
+    {/await}
+
+    <label
+        for="ae_comp__hosted_files_upload__input"
+        class="svelte_input_file_label text-center"
+        class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
+        >
+        <slot name="label">
+        <div>
+            <span class="fas fa-upload"></span>
+            <!-- Select files to upload -->
+            <!-- <span class="fas fa-file-archive"></span> -->
+            <strong class="bg-blue-300 p-1">Upload files</strong>
+            <!-- (drag and drop) -->
+        </div>
+        <span 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)
+        </span>
+        </slot>
+    </label>
+
+    <input
+        id={input_element_id}
+        type="file"
+        bind:files={input_file_list}
+        {multiple}
+        {required}
+        {accept}
+        name={input_name}
+        class="svelte_input_file_element file-dropzone-input block w-full text-lg text-gray-900 border border-gray-300 rounded-lg cursor-pointer bg-gray-50 dark:text-gray-400 focus:outline-none dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
+        class:hidden={$ae_sess.files.disable_submit__hosted_file_obj}
+        />
+
+    <Element_input_files_tbl
+        bind:input_file_list={input_file_list}
+
+        bind:file_list_status={$ae_sess.files.status__file_list}
+        bind:processed_file_list={$ae_sess.files.processed_file_list}
+        table_class_li={table_class_li}
+        />
+
+    <button
+        type="submit"
+        class="btn btn-lg btn-primary variant-ghost-primary hover:variant-ghost-success w-54"
+        disabled={$ae_sess.files.disable_submit__hosted_file_obj || $ae_sess.files.status__file_list != 'ready'}
+        >
+        {#await ae_promises.upload__hosted_file_obj}
+            <span class="fas fa-spinner fa-spin m-1"></span>
+            <span class="">
+                Uploading
+                {#if $ae_sess.api_upload_kv[task_id]}
+                    {$ae_sess.api_upload_kv[task_id].percent_completed}%
+                {/if}
+            </span>
+        {:then}
+            <span class="fas fa-upload m-1"></span>
+            <span class="text-sm">
+                Upload?
+            </span>
+            <!-- <span class="fas fa-save m-1"></span> -->
+            <span class="grow font-bold">
+                {#if $ae_sess.files.processed_file_list.length > 0}
+                    <!-- {#each $ae_sess.files.processed_file_list as file_obj, index}
+                        <span class="text-xs">
+                            {file_obj.filename}
+                        </span>
+                    {/each} -->
+                    {$ae_sess.files.processed_file_list.length == 1 ? `${$ae_sess.files.processed_file_list.length} file` : `${$ae_sess.files.processed_file_list.length} files`}
+                {:else}
+                    <span class="text-xs">
+                        No files selected
+                    </span>
+                {/if}
+                <!-- Files -->
+            </span>
+        {/await}
+    </button>
+</form>
diff --git a/src/lib/ae_core/ae_core_functions.ts b/src/lib/ae_core/ae_core_functions.ts
index 558f4740..d86eaba7 100644
--- a/src/lib/ae_core/ae_core_functions.ts
+++ b/src/lib/ae_core/ae_core_functions.ts
@@ -38,6 +38,10 @@ import {
     load_ae_obj_li__country_subdivision
 } from "$lib/ae_core/core__country_subdivisions";
 
+import {
+    delete_ae_obj_id__hosted_file
+} from "$lib/ae_core/core__hosted_files";
+
 let ae_promises: key_val = {}; // Promise<any>;
 
 
@@ -397,6 +401,7 @@ let export_obj = {
     load_ae_obj_li__time_zone: load_ae_obj_li__time_zone,
     load_ae_obj_li__country: load_ae_obj_li__country,
     load_ae_obj_li__country_subdivision: load_ae_obj_li__country_subdivision,
+    delete_ae_obj_id__hosted_file: delete_ae_obj_id__hosted_file,
     handle_load_ae_obj_id__site_domain: handle_load_ae_obj_id__site_domain,
     handle_load_ae_obj_code__data_store: handle_load_ae_obj_code__data_store,
     load_ae_obj_id__activity_log: load_ae_obj_id__activity_log,
diff --git a/src/lib/ae_core/core__hosted_files.ts b/src/lib/ae_core/core__hosted_files.ts
new file mode 100644
index 00000000..61e160c4
--- /dev/null
+++ b/src/lib/ae_core/core__hosted_files.ts
@@ -0,0 +1,59 @@
+import type { key_val } from '$lib/ae_stores';
+import { api } from '$lib/api';
+
+// import { db_events } from "$lib/db_events";
+
+let ae_promises: key_val = {};
+
+
+// Updated 2024-11-07
+export async function delete_ae_obj_id__hosted_file(
+        {
+            api_cfg,
+            hosted_file_id,
+            link_to_type, // Ideally this should be required...
+            link_to_id, // Ideally this should be required...
+            rm_orphan = false,
+            fake_delete = false, // Fake the delete result to "true"
+            params = {},
+            log_lvl = 0
+        }: {
+            api_cfg: any,
+            hosted_file_id: string,
+            link_to_type: string,
+            link_to_id: string,
+            rm_orphan?: boolean,
+            fake_delete?: boolean,
+            params?: key_val,
+            log_lvl?: number
+        }
+    ) {
+    if (log_lvl) {
+        console.log(`*** delete_ae_obj_id__hosted_file() *** hosted_file_id=${hosted_file_id}`);
+    }
+
+    const endpoint = `/hosted_file/${hosted_file_id}`;
+
+    params['link_to_type'] = link_to_type;
+    params['link_to_id'] = link_to_id;
+    params['rm_orphan'] = rm_orphan; // This is what actually allows the hosted file to be deleted from the server.
+    if (log_lvl) {
+        console.log(`delete_ae_obj_id__hosted_file() params=`, params);
+    }
+
+    if (fake_delete) {
+        console.log(`*** FAKE DELETE!!! ***`);
+        ae_promises.delete__hosted_file_obj = true;
+        return ae_promises.delete__hosted_file_obj;
+    }
+
+    ae_promises.delete__hosted_file_obj = await api.delete_object({
+        api_cfg: api_cfg,
+        endpoint: endpoint,
+        params: params,
+        // return_meta: return_meta,
+        log_lvl: log_lvl
+    });
+
+    return ae_promises.delete__hosted_file_obj;
+}
\ No newline at end of file
diff --git a/src/lib/ae_stores.ts b/src/lib/ae_stores.ts
index 7f5c1144..bc3f4e3f 100644
--- a/src/lib/ae_stores.ts
+++ b/src/lib/ae_stores.ts
@@ -211,6 +211,13 @@ export let ae_app_session_data_struct: key_val = {
     },
     'ds_loaded': {
     },
+
+    'files': {
+        disable_submit__hosted_file_obj: false,
+        processed_file_list: [],
+        submit_status: null, // 'saving', 'created', 'updated', 'saved'
+    },
+
     'hub': {
         'show_xyz': null,
     },
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
index ab9446af..acedbce4 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_id_edit.svelte
@@ -15,6 +15,7 @@ import { idaa_loc, idaa_sess, idaa_slct } from '$lib/ae_idaa_stores';
 import { archives_func } from '$lib/ae_archives/ae_archives_functions';
 
 import Tiptap_editor from '$lib/element_tiptap_editor.svelte';
+import Comp_hosted_files_upload from '$lib/ae_core/ae_comp__hosted_files_upload.svelte';
 
 export let lq__archive_content_obj: any;
 
@@ -22,7 +23,8 @@ let create_archive_content_obj_promise: any;
 let delete_archive_content_obj_promise: any;
 let update_archive_content_obj_promise: any;
 let upload__hosted_file_obj_promise: any;
-let prom_api__archive_content_obj_v2: any;
+let prom_api__archive_content_obj: any;
+let prom_api__archive_content_obj__hosted_file: any;
 
 let disable_submit_btn = true;
 
@@ -291,7 +293,7 @@ async function handle_submit_form(event) {
         return create_archive_content_obj_promise;
 
     } else {
-        prom_api__archive_content_obj_v2 = archives_func.update_ae_obj__archive_content({
+        prom_api__archive_content_obj = archives_func.update_ae_obj__archive_content({
             api_cfg: $ae_api,
             archive_content_id: $idaa_slct.archive_content_id,
             data_kv: archive_content_do,
@@ -317,7 +319,7 @@ async function handle_submit_form(event) {
             // $idaa_sess.archives.show__modal_edit__archive_content_id = false;
         });
 
-        return prom_api__archive_content_obj_v2;
+        return prom_api__archive_content_obj;
     }
 
     //     update_archive_content_obj_promise = api.update_ae_obj_id_crud({
@@ -353,6 +355,36 @@ async function handle_submit_form(event) {
     // }
 }
 
+$: if ($idaa_slct.archive_content_obj.upload_complete && $idaa_slct.archive_content_obj.hosted_file_id_li?.length && $idaa_slct.archive_content_obj.hosted_file_obj_li?.length) {
+    handle_hosted_files_uploaded($idaa_slct.archive_content_obj.hosted_file_id_li, $idaa_slct.archive_content_obj.hosted_file_obj_li);
+}
+
+
+async function handle_hosted_files_uploaded(hosted_file_id_li: string[], hosted_file_obj_li: any[]) {
+    console.log(`*** handle_hosted_files_uploaded() *** ${hosted_file_id_li}`);
+
+    // We need to update the archive_content_obj with the new file (for now just the first one).
+    prom_api__archive_content_obj = archives_func.update_ae_obj__archive_content({
+        api_cfg: $ae_api,
+        archive_content_id: $idaa_slct.archive_content_id,
+        data_kv: {
+            hosted_file_id_random: hosted_file_obj_li[0].hosted_file_id_random,
+            // file_path: hosted_file_obj_li[0].file_path,
+            filename: hosted_file_obj_li[0].filename,
+            file_extension: hosted_file_obj_li[0].extension,
+            archive_content_type: 'hosted_file',
+            },
+        log_lvl: log_lvl
+        })
+    .then(function (archive_content_obj_update_result) {
+        $idaa_slct.archive_content_obj = $lq__archive_content_obj;
+    })
+    .catch(function (error) {
+        console.log('Something went wrong.');
+        console.log(error);
+        return false;
+    });
+}
 
 </script>
 
@@ -446,9 +478,39 @@ async function handle_submit_form(event) {
         </fieldset> -->
 
         <h3>File?</h3>
-        {#if !$idaa_slct.archive_content_id}
 
-            FILE INPUT GOES HERE
+        {#if $ae_loc.trusted_access && $idaa_slct.archive_content_id}
+            <Comp_hosted_files_upload
+                class_li="border border-gray-300 rounded-md p-2 bg-gray-100 hover:bg-gray-200"
+                link_to_type="archive_content"
+                link_to_id={$idaa_slct.archive_content_obj.archive_content_id}
+                bind:hosted_file_id_li={$idaa_slct.archive_content_obj.hosted_file_id_li}
+                bind:hosted_file_obj_li={$idaa_slct.archive_content_obj.hosted_file_obj_li}
+                bind:upload_complete={$idaa_slct.archive_content_obj.upload_complete}
+                log_lvl={2}
+                >
+                <span slot="label">
+                    <div>
+                        <span class="fas fa-upload"></span>
+                        <strong class="bg-green-100 p-1">Upload archive files</strong>
+                    </div>
+                    <span class="text-sm text-gray-600 dark:text-gray-400 italic">
+                        <strong>Aether hosted files only</strong><br>
+                        Recommended: PowerPoint (pptx) or Keynote (key) or Adobe PDF<br>
+                        Media: Audio (mp3, m4a) and videos (mp4, mkv)<br>
+                        Supplemental files: Word Doc, Excel, txt, etc
+                    </span>
+                </span>
+            </Comp_hosted_files_upload>
+        {/if}
+
+        <!-- {$idaa_slct.archive_content_obj.hosted_file_id_li?.length ? $idaa_slct.archive_content_obj.hosted_file_id_li.length : 'waiting...'} -->
+        <!-- {$idaa_slct.archive_content_obj.upload_complete ? 'Upload complete' : 'Upload not complete'} -->
+
+        {#if !$idaa_slct.archive_content_obj.hosted_file_id}
+            No file uploaded yet.
+
+            <!-- FILE INPUT GOES HERE -->
             <!-- <Element_input_file_hashing
                 multiple = {false}
                 required = {true}
@@ -462,7 +524,80 @@ async function handle_submit_form(event) {
 
         {:else}
 
-            <label for="file_path">File Path
+            <button
+                disabled={!$ae_loc.administrator_access}
+                type="button"
+                on:click={() => {
+                    if (confirm('Are you sure you want to remove the file?')) {
+
+
+                        // First - Attempt to delete the hosted file
+                        prom_api__archive_content_obj__hosted_file = core_func.delete_ae_obj_id__hosted_file({
+                            api_cfg: $ae_api,
+                            hosted_file_id: $idaa_slct.archive_content_obj.hosted_file_id,
+                            link_to_type: 'archive_content',
+                            link_to_id: $idaa_slct.archive_content_id,
+                            rm_orphan: true,
+                            fake_delete: false,
+                            log_lvl: log_lvl
+                            })
+                        .then(function (delete_result) {
+                            // Second - If deleted, then update the archive_content_obj
+                            console.log(`File removed. Now update the archive_content_obj`);
+                            prom_api__archive_content_obj = archives_func.update_ae_obj__archive_content({
+                                api_cfg: $ae_api,
+                                archive_content_id: $idaa_slct.archive_content_id,
+                                data_kv: {
+                                    hosted_file_id_random: null,
+                                    file_path: null,
+                                    filename: null,
+                                    file_extension: null,
+                                    archive_content_type: null,
+                                    },
+                                log_lvl: log_lvl
+                                })
+                            .then(function (archive_content_obj_update_result) {
+                                // ???
+                            })
+                            .catch(function (error) {
+                                console.log('Something went wrong.');
+                                console.log(error);
+                                return false;
+                            });
+                        })
+                        .catch(function (error) {
+                            console.log('Something went wrong.');
+                            console.log(error);
+                            return false;
+                        })
+                        .finally(() => {
+                            $idaa_slct.archive_content_obj.hosted_file_id = null;
+                            $idaa_slct.archive_content_obj.file_path = null;
+                            $idaa_slct.archive_content_obj.filename = null;
+                            $idaa_slct.archive_content_obj.file_extension = null;
+
+                            // We need to do this since the comment has changed and the idaa_slct object does automatically update (yet...???).
+                            $idaa_slct.archive_content_obj = $lq__archive_content_obj;
+                            // disable_submit_btn = false;
+                            // $idaa_sess.archives.show__modal_edit__archive_content_id = false;
+                        });
+
+
+                    }
+                }}
+                class="btn btn-sm variant-soft-error float-right"
+                >
+                {#await prom_api__archive_content_obj__hosted_file}
+                    <span class="fas fa-spinner fa-spin m-1"></span>
+                {:then}
+                    <span class="fas fa-trash-alt m-1"></span>
+                    Remove File
+                {/await}
+                <!-- <span class="fas fa-trash-alt m-1"></span>
+                Remove File -->
+            </button>
+
+            <!-- <label for="file_path">File Path
                 {#if !$ae_loc.administrator_access}
                     <span class="fas fa-lock" title="Field is locked"></span>
                 {:else}
@@ -476,10 +611,10 @@ async function handle_submit_form(event) {
                     readonly={!$ae_loc.administrator_access}
                     class="input w-full"
                     >
-            </label>
+            </label> -->
 
             <label for="filename">Filename
-                <input type="text" id="filename" name="filename" value={($idaa_slct.archive_content_obj.filename ? $idaa_slct.archive_content_obj.filename : $idaa_loc.archives.input_filename)} class="input w-full">
+                <input type="text" id="filename" name="filename" value={($idaa_slct.archive_content_obj.filename ? $idaa_slct.archive_content_obj.filename : 'unknown')} class="input w-full">
             </label>
 
             <label for="file_extension">File Extension
@@ -492,7 +627,7 @@ async function handle_submit_form(event) {
                     type="text"
                     id="file_extension"
                     name="file_extension"
-                    value={($idaa_slct.archive_content_obj.file_extension ? $idaa_slct.archive_content_obj.file_extension : $idaa_loc.archives.input_file_extension)}
+                    value={($idaa_slct.archive_content_obj.file_extension ? $idaa_slct.archive_content_obj.file_extension : 'ext')}
                     readonly={!$ae_loc.administrator_access}
                     class="input w-24"
                     >
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
index b5e38d7e..c5d7c712 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_content_obj_li.svelte
@@ -125,7 +125,7 @@ onMount(() => {
 
             {#if $ae_loc.trusted_access}
                 <button
-                    disabled={!$ae_loc.administrator_access}
+                    disabled={!$ae_loc.trusted_access}
                     on:click={() => {
                         $idaa_slct.archive_content_id = idaa_archive_content_obj.archive_content_id;
                         $idaa_slct.archive_content_obj = idaa_archive_content_obj;
@@ -146,9 +146,9 @@ onMount(() => {
             <div
                 class="archive_content__description ae_description"
                 >
-                <div class="ae_label archive_content__description">Description:</div>
+                <div class="ae_label archive_content__description text-sm">Description:</div>
                 <div class="ae_value archive_content__description">
-                    {idaa_archive_content_obj?.description}
+                    {@html idaa_archive_content_obj?.description}
                 </div>
             </div>
             {/if}
@@ -157,7 +157,7 @@ onMount(() => {
             <div
                 class="archive_content__content_html ae_content_html"
                 >
-                <div class="ae_label archive_content__content_html">Content:</div>
+                <div class="ae_label archive_content__content_html text-sm">Content:</div>
                 <div class="ae_value archive_content__content_html">
                     {@html idaa_archive_content_obj?.content_html}
                 </div>
@@ -168,13 +168,13 @@ onMount(() => {
                 class="ae_group"
                 class:hidden={!idaa_archive_content_obj?.original_datetime && !idaa_archive_content_obj?.original_timezone}
                 >
-                <span class="ae_label">Original date/time:</span>
+                <span class="ae_label text-sm">Original date/time:</span>
                 {#if idaa_archive_content_obj.original_datetime}
-                    <span class="ae_value ae_prop prop_original_datetime fs_smaller">{ae_util.iso_datetime_formatter(idaa_archive_content_obj.original_datetime, 'datetime_12_long')}</span>
+                    <span class="ae_value ae_prop prop_original_datetime font-semibold">{ae_util.iso_datetime_formatter(idaa_archive_content_obj.original_datetime, 'datetime_12_long')}</span>
                 {/if}
                 {#if idaa_archive_content_obj.original_timezone}
-                    <span class="ae_label">Timezone:</span>
-                    <span class="ae_value">{idaa_archive_content_obj.original_timezone}</span>
+                    <span class="ae_label text-sm">Timezone:</span>
+                    <span class="ae_value font-semibold">{idaa_archive_content_obj.original_timezone}</span>
                 {/if}
             </div>
 
diff --git a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte
index 18896319..24b59977 100644
--- a/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte
+++ b/src/routes/idaa/(idaa)/archives/[archive_id]/ae_idaa_comp__archive_obj_id_view.svelte
@@ -72,6 +72,7 @@ onMount(() => {
     <div class="ae_options">
         {#if $ae_loc.trusted_access || $lq__archive_obj?.external_person_id === $idaa_loc.novi_uuid}
         <button
+            disabled={$ae_loc.administrator_access}
             on:click={() => {
                 $slct.archive_content_id = null;
                 $slct.archive_content_obj = {};
@@ -84,6 +85,7 @@ onMount(() => {
         </button>
 
         <button
+            disabled={$ae_loc.administrator_access}
             on:click={() => {
                 // $slct.archive_id = $lq__archive_obj?.archive_id_random;
                 // $lq__archive_obj? = $lq__archive_obj?;
diff --git a/src/routes/idaa/(idaa)/archives/ae_idaa_comp__media_player.svelte b/src/routes/idaa/(idaa)/archives/ae_idaa_comp__media_player.svelte
index 91317194..55a4dead 100644
--- a/src/routes/idaa/(idaa)/archives/ae_idaa_comp__media_player.svelte
+++ b/src/routes/idaa/(idaa)/archives/ae_idaa_comp__media_player.svelte
@@ -94,7 +94,7 @@ onMount(() => {
 
     {#if $idaa_slct.archive_content_obj.description}
         <div class="archive_content__description">
-            {$idaa_slct.archive_content_obj.description}
+            {@html $idaa_slct.archive_content_obj.description}
         </div>
     {/if}