Finally got the presenter file upload working better.
This commit is contained in:
Scott Idem
@@ -1,6 +1,8 @@
|
||||
<script lang="ts">
|
||||
console.log(`ae_events_pres_mgmt session [slug] form_agree.svelte`);
|
||||
|
||||
export let data: any;
|
||||
|
||||
import { onMount } from 'svelte';
|
||||
import { clipboard, FileDropzone } from '@skeletonlabs/skeleton';
|
||||
import { liveQuery } from "dexie";
|
||||
@@ -130,6 +132,128 @@ onMount(() => {
|
||||
// return ae_promises.update__event_presenter_obj;
|
||||
// }
|
||||
|
||||
|
||||
async function handle_submit_form_files(event) {
|
||||
console.log('*** handle_submit_form() ***');
|
||||
|
||||
$events_sess.pres_mgmt.disable_submit__event_file_obj = true;
|
||||
$events_sess.pres_mgmt.submit_status = 'saving';
|
||||
|
||||
let hosted_file_results;
|
||||
|
||||
if (event.target.presenter_event_file.files.length > 0) {
|
||||
|
||||
hosted_file_results = await handle_input_upload_files(event.target.presenter_event_file.files);
|
||||
|
||||
|
||||
if (hosted_file_results) {
|
||||
console.log(`hosted_file_results:`, hosted_file_results);
|
||||
} else {
|
||||
console.log(`hosted_file_results:`, hosted_file_results);
|
||||
}
|
||||
}
|
||||
|
||||
$events_sess.pres_mgmt.disable_submit__event_file_obj = false;
|
||||
}
|
||||
|
||||
|
||||
async function handle_input_upload_files(input_upload_files) {
|
||||
console.log('*** handle_input_upload_files() ***');
|
||||
|
||||
let link_to_type = 'event_presenter';
|
||||
let link_to_id = $events_slct.event_presenter_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]);
|
||||
}
|
||||
|
||||
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 = await api.post_object({api_cfg: $ae_api, endpoint: endpoint, params: params, form_data: form_data})
|
||||
|
||||
.then(async function (result) {
|
||||
// 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;
|
||||
|
||||
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;
|
||||
console.log(event_file_data);
|
||||
|
||||
// $events_sess.pres_mgmt.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: 2
|
||||
})
|
||||
.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 (event_file_id) {
|
||||
// $events_sess.pres_mgmt.files_uploading_count--;
|
||||
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>
|
||||
|
||||
{#await $lq__event_presenter_obj}
|
||||
@@ -189,7 +313,7 @@ onMount(() => {
|
||||
type="button"
|
||||
class="btn btn-sm variant-soft-warning"
|
||||
|
||||
use:clipboard={encodeURI(`${data.url.origin}/events_pres_mgmt/session/${$events_slct.event_session_id}?person_id=${event_presenter_obj.person_id_random}&person_pass=${event_presenter_obj.person_passcode}&presentation_id=${event_presentation_obj.event_presentation_id_random}&presenter_id=${event_presenter_obj.event_presenter_id_random}`)}
|
||||
use:clipboard={encodeURI(`${$ae_loc.url_origin}/events_pres_mgmt/session/${$events_slct.event_session_id}?person_id=${$events_slct.presenter_obj.person_id_random}&person_pass=${$events_slct.presenter_obj.person_passcode}&presentation_id=${$events_slct.presentation_obj.event_presentation_id_random}&presenter_id=${$events_slct.presenter_obj.event_presenter_id_random}`)}
|
||||
>
|
||||
<span class="fas fa-copy mx-1"></span>
|
||||
Copy Access Link
|
||||
@@ -198,14 +322,23 @@ onMount(() => {
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h3 class="h4">Files:</h3>
|
||||
<h3 class="h4">Files: {$events_slct.presenter_obj.file_count ? `${$events_slct.presenter_obj.file_count}x` : '-- none --'}</h3>
|
||||
|
||||
<span class="text-muted bg-orange-100 p-2 rounded-md text-center">
|
||||
WARNING: This is a work in progress. The file upload feature is not yet fully functional.
|
||||
</span>
|
||||
<form
|
||||
class="modal-form {$ae_loc.hub.classes__form}"
|
||||
on:submit|preventDefault={handle_submit_form_files}
|
||||
>
|
||||
|
||||
<label for="input__presenter_event_file">
|
||||
Upload outline or draft file(s):
|
||||
<FileDropzone
|
||||
id="input__presenter_event_file"
|
||||
name="presenter_event_file"
|
||||
padding="p-1"
|
||||
accept="image/*"
|
||||
accept="*"
|
||||
class="w-96 variant-glass-warning"
|
||||
on:change={(e) => {
|
||||
console.log('*** FileDropzone change event ***', e);
|
||||
@@ -219,13 +352,30 @@ onMount(() => {
|
||||
>
|
||||
<svelte:fragment slot="lead"><span class="fas fa-file-upload"></svelte:fragment>
|
||||
<svelte:fragment slot="message"><strong>Upload your file</strong> (drag and drop)</svelte:fragment>
|
||||
<svelte:fragment slot="meta">High resolution image files only<br>(PNG, WEBP, JPG, etc)</svelte:fragment>
|
||||
<svelte:fragment slot="meta">Presentation related files only<br>(PowerPoint, Keynote, PDF, mp4, Word Doc, Excel, txt, etc)</svelte:fragment>
|
||||
|
||||
{ae_placeholder_li.new_file ?? 'No files selected.'}
|
||||
</FileDropzone>
|
||||
</label>
|
||||
|
||||
File count: {$events_slct.presenter_obj.file_count ?? '-- none --'}
|
||||
<button
|
||||
type="submit"
|
||||
class="btn btn-md variant-ghost-secondary m-2"
|
||||
disabled={($events_sess.pres_mgmt.disable_submit__event_file_obj)}
|
||||
on:click={() => {
|
||||
console.log('*** Save button clicked ***');
|
||||
// if (!confirm('Are you sure you want to save this event_presenter?')) {return false;}
|
||||
// handle_submit_form();
|
||||
// handle_submit_form;
|
||||
}}
|
||||
>
|
||||
<span class="fas fa-save mx-1"></span>
|
||||
Upload File
|
||||
</button>
|
||||
|
||||
</form>
|
||||
|
||||
|
||||
{#if $lq__event_file_obj_li}
|
||||
<ul
|
||||
class="space-y-2 px-4"
|
||||
|
||||
Reference in New Issue
Block a user