Scott.Idem/OSIT-AE-App-Svelte
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

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?

Browse Source
This commit is contained in:
Scott Idem
2024-11-07 19:34:57 -05:00
parent 079ec80fbd
commit b93cacdfcc
9 changed files with 540 additions and 27 deletions
Download Patch File Download Diff File Expand all files Collapse all files

18
src/lib/ae_archives/ae_archives__archive_content.ts
View File

@@ -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,

305
src/lib/ae_core/ae_comp__hosted_files_upload.svelte Normal file
View File

@@ -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>

5
src/lib/ae_core/ae_core_functions.ts
View File

@@ -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,

59
src/lib/ae_core/core__hosted_files.ts Normal file
View File

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

7
src/lib/ae_stores.ts
View File

@@ -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,
},