diff --git a/src/lib/components/AddFilesPlaceholder.svelte b/src/lib/components/AddFilesPlaceholder.svelte index 7cc51c6f..3cbd0454 100644 --- a/src/lib/components/AddFilesPlaceholder.svelte +++ b/src/lib/components/AddFilesPlaceholder.svelte @@ -1,6 +1,8 @@
📄
Add Files
-
- Drop any files here to add to the conversation -
+
+ Drop any files here to add to the conversation +
+ diff --git a/src/routes/(app)/documents/+page.svelte b/src/routes/(app)/documents/+page.svelte index f5b8e5ec..2c4d82fe 100644 --- a/src/routes/(app)/documents/+page.svelte +++ b/src/routes/(app)/documents/+page.svelte @@ -12,6 +12,7 @@ import { transformFileName } from '$lib/utils'; import EditDocModal from '$lib/components/documents/EditDocModal.svelte'; + import AddFilesPlaceholder from '$lib/components/AddFilesPlaceholder.svelte'; let importFiles = ''; @@ -49,44 +50,94 @@ } }; - const onDragOver = (e) => { - e.preventDefault(); - dragged = true; - }; + onMount(() => { + const dropZone = document.querySelector('body'); - const onDragLeave = () => { - dragged = false; - }; + const onDragOver = (e) => { + e.preventDefault(); + dragged = true; + }; - const onDrop = async (e) => { - e.preventDefault(); - console.log(e); + const onDragLeave = () => { + dragged = false; + }; - if (e.dataTransfer?.files) { - const inputFiles = e.dataTransfer?.files; + const onDrop = async (e) => { + e.preventDefault(); + console.log(e); - if (inputFiles && inputFiles.length > 0) { - const file = inputFiles[0]; - if ( - SUPPORTED_FILE_TYPE.includes(file['type']) || - SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1)) - ) { - uploadDoc(file); + if (e.dataTransfer?.files) { + let reader = new FileReader(); + + reader.onload = (event) => { + files = [ + ...files, + { + type: 'image', + url: `${event.target.result}` + } + ]; + }; + + const inputFiles = e.dataTransfer?.files; + + if (inputFiles && inputFiles.length > 0) { + const file = inputFiles[0]; + console.log(file, file.name.split('.').at(-1)); + if (['image/gif', 'image/jpeg', 'image/png'].includes(file['type'])) { + reader.readAsDataURL(file); + } else if ( + SUPPORTED_FILE_TYPE.includes(file['type']) || + SUPPORTED_FILE_EXTENSIONS.includes(file.name.split('.').at(-1)) + ) { + uploadDoc(file); + } else { + toast.error( + `Unknown File Type '${file['type']}', but accepting and treating as plain text` + ); + uploadDoc(file); + } } else { - toast.error( - `Unknown File Type '${file['type']}', but accepting and treating as plain text` - ); - uploadDoc(file); + toast.error(`File not found.`); } - } else { - toast.error(`File not found.`); } - } - dragged = false; - }; + dragged = false; + }; + + dropZone?.addEventListener('dragover', onDragOver); + dropZone?.addEventListener('drop', onDrop); + dropZone?.addEventListener('dragleave', onDragLeave); + + return () => { + dropZone?.removeEventListener('dragover', onDragOver); + dropZone?.removeEventListener('drop', onDrop); + dropZone?.removeEventListener('dragleave', onDragLeave); + }; + }); +{#if dragged} +
+
+
+
+ +
+ Drop any files here to add to my documents +
+ +
+
+
+
+{/if} + {#key selectedDoc} {/key} @@ -170,7 +221,7 @@ }} /> -
+ {#each $documents.filter((p) => query === '' || p.name.includes(query)) as doc}
@@ -330,106 +381,97 @@
{/each} - {#if $documents.length != 0} -
-
-
- { - console.log(importFiles); +
- const reader = new FileReader(); - reader.onload = async (event) => { - const savedDocs = JSON.parse(event.target.result); - console.log(savedDocs); +
+
+ { + console.log(importFiles); - for (const doc of savedDocs) { - await createNewDoc( - localStorage.token, - doc.collection_name, - doc.filename, - doc.name, - doc.title - ).catch((error) => { - toast.error(error); - return null; - }); - } + const reader = new FileReader(); + reader.onload = async (event) => { + const savedDocs = JSON.parse(event.target.result); + console.log(savedDocs); - await documents.set(await getDocs(localStorage.token)); - }; + for (const doc of savedDocs) { + await createNewDoc( + localStorage.token, + doc.collection_name, + doc.filename, + doc.name, + doc.title + ).catch((error) => { + toast.error(error); + return null; + }); + } - reader.readAsText(importFiles[0]); - }} - /> + await documents.set(await getDocs(localStorage.token)); + }; - - - - - -
+
Import Documents Mapping
+ +
+ + + +
+ + +
- {/if} +