OSIT-AE-App-Svelte/src/routes/events/ae_comp__event_files_upload.svelte

<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';
import { events_loc, events_sess, events_slct, events_trigger } from '$lib/ae_events_stores';
import { events_func } from '$lib/ae_events_functions';
import { db_events } from "$lib/ae_events/db_events";


// Exports
// Expecting these for link_to_type: 'event', 'event_location', 'event_presentation', 'event_presenter', 'event_session'
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', '' , 'text-sm'];

export let upload_complete: boolean = false;
export let submit_status: null|string = null;


// 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__event_files_upload__input';

// Functions and Logic
async function handle_submit_form_files(event) {
    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];

            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);
            }
        }
        // hosted_file_results = await handle_input_upload_files(event.target[input_element_id].files, task_id);
        $events_sess.files.processed_file_list = [];
        $events_sess = $events_sess;
        event.target.reset();
        // await tick();


        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
        });
    }

    $events_sess.files.disable_submit__event_file_obj = false;
    $events_sess.files.submit_status = 'saved';
    submit_status = 'saved';
    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}`);
    }

    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
    // $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
    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,
        // retry_count: 1,
    })
    .then(async function (result) {
        // console.log('HERE!!', 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;
        if (log_lvl) {
            console.log(`result = `, result[x]);
        }
        let hosted_file_obj = result[x];

        let hosted_file_id = hosted_file_obj.hosted_file_id_random;

        let event_file_data: key_val = {};
        event_file_data['hosted_file_id_random'] = hosted_file_id;
        event_file_data['for_type'] = link_to_type;
        event_file_data['for_id_random'] = 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;
    })
    .catch(function (error) {
        console.log('Something went wrong.');
        console.log(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;
}

</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__event_files_upload__input"
        class="svelte_input_file_label text-center"
        class:hidden={$events_sess.files.disable_submit__event_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-hidden dark:bg-gray-700 dark:border-gray-600 dark:placeholder-gray-400 {input_class_li.join(' ')}"
        class:hidden={$events_sess.files.disable_submit__event_file_obj}
        />

    <Element_input_files_tbl
        bind:input_file_list={input_file_list}

        bind:file_list_status={$events_sess.files.status__file_list}
        bind:processed_file_list={$events_sess.files.processed_file_list}
        table_class_li={table_class_li}
        />

    <button
        type="submit"
        class="btn btn-lg btn-primary preset-tonal-primary border border-primary-500 hover:preset-tonal-success border border-success-500 w-54"
        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>
            <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 $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} -->
                    {$events_sess.files.processed_file_list.length == 1 ? `${$events_sess.files.processed_file_list.length} file` : `${$events_sess.files.processed_file_list.length} files`}
                {:else}
                    <span class="text-xs">
                        No files selected
                    </span>
                {/if}
                <!-- Files -->
            </span>
        {/await}
    </button>
</form>