From 72e963f269bdfb83bf17e46d8427b94c0dcb5822 Mon Sep 17 00:00:00 2001
From: Jojo Ortiz <ortiz.jroman@gmail.com>
Date: Tue, 21 Nov 2023 16:54:50 -0800
Subject: [PATCH] add drag and drop file upload capability

---
 pykoi/frontend/src/assets/CloudArrowUp.svelte |  4 +
 pykoi/frontend/src/lib/RAG/RAG.svelte         | 77 ++++++++++++++++---
 2 files changed, 71 insertions(+), 10 deletions(-)
 create mode 100644 pykoi/frontend/src/assets/CloudArrowUp.svelte

diff --git a/pykoi/frontend/src/assets/CloudArrowUp.svelte b/pykoi/frontend/src/assets/CloudArrowUp.svelte
new file mode 100644
index 0000000..a0239fb
--- /dev/null
+++ b/pykoi/frontend/src/assets/CloudArrowUp.svelte
@@ -0,0 +1,4 @@
+<script>
+    export let height = 256, width = 256;
+</script>
+<svg xmlns="http://www.w3.org/2000/svg" width={width} height={height} fill="currentColor" viewBox="0 0 256 256"><path d="M248,128a87.34,87.34,0,0,1-17.6,52.81,8,8,0,1,1-12.8-9.62A71.34,71.34,0,0,0,232,128a72,72,0,0,0-144,0,8,8,0,0,1-16,0,88,88,0,0,1,3.29-23.88C74.2,104,73.1,104,72,104a48,48,0,0,0,0,96H96a8,8,0,0,1,0,16H72A64,64,0,1,1,81.29,88.68,88,88,0,0,1,248,128Zm-90.34-5.66a8,8,0,0,0-11.32,0l-32,32a8,8,0,0,0,11.32,11.32L144,147.31V208a8,8,0,0,0,16,0V147.31l18.34,18.35a8,8,0,0,0,11.32-11.32Z"></path></svg>
\ No newline at end of file
diff --git a/pykoi/frontend/src/lib/RAG/RAG.svelte b/pykoi/frontend/src/lib/RAG/RAG.svelte
index 17cab22..190d84c 100644
--- a/pykoi/frontend/src/lib/RAG/RAG.svelte
+++ b/pykoi/frontend/src/lib/RAG/RAG.svelte
@@ -3,12 +3,33 @@
   import Table from "./Components/tanstackTable/Table.svelte";
   import { onMount } from "svelte";
   import { uploadedFiles, projections } from "../store.js";
+  import CloudArrowUp from "../../assets/CloudArrowUp.svelte";
 
   let selectedFiles = [];
   let indexed = false;
   let indexing = false;
   async function handleFileChange(event) {
-    selectedFiles = event.target.files;
+    event.preventDefault();
+    let selectedFiles = [];
+    if (event.dataTransfer) {
+      if (event.dataTransfer.items) {
+        // Use DataTransferItemList interface to access the file(s)
+        [...event.dataTransfer.items].forEach((item, i) => {
+          // If dropped items aren't files, reject them
+          if (item.kind === "file") {
+            const file = item.getAsFile();
+            selectedFiles.push(file);
+          }
+        });
+      } else {
+        // Use DataTransfer interface to access the file(s)
+        [...event.dataTransfer.files].forEach((file, i) => {
+          selectedFiles.push(file);
+        });
+      }
+    } else {
+      selectedFiles = event.target.files;
+    }
     const formData = new FormData();
     // iterate over selectedFiles and add them to array
     for (let i = 0; i < selectedFiles.length; i++) {
@@ -56,6 +77,12 @@
     $projections = embeddingData;
   }
 
+  function dragOverHandler(event) {
+    console.log("File(s) in drop zone");
+    // Prevent default behavior (Prevent file from being opened)
+    event.preventDefault();
+  }
+
   onMount(() => {
     loadServerData();
   });
@@ -76,18 +103,27 @@
     <div class="upload-container">
       <div class="upload-box">
         <h4>Upload Data</h4>
-        <br />
-        <form>
-          <input type="file" multiple on:change={handleFileChange} />
-        </form>
+        <p>These are the files your model will use as context.</p>
+        <div class="upload-files-container">
+          <form>
+            <input type="file" multiple on:change={handleFileChange} />
+          </form>
+          <div
+            class="drop-zone"
+            on:drop={handleFileChange}
+            on:dragover={dragOverHandler}
+          >
+            <CloudArrowUp height={32} width={32} />
+            Drag and drop files here
+          </div>
+        </div>
         {#if indexing && !indexed}
           <p>{dots}</p>
         {/if}
         {#if indexed}
           <p>Data Successfully indexed!</p>
         {/if}
-        <p>These are the files your model will use as context.</p>
-        <p>Currently <strong>pdf</strong>, txt, and md are supported.</p>
+        <p>Currently pdf, txt, and md are supported.</p>
       </div>
     </div>
   </div>
@@ -100,6 +136,17 @@
 </div>
 
 <style>
+  .drop-zone {
+    display: flex;
+    flex-direction: column;
+    align-items: center;
+    justify-content: center;
+    border: 2px dashed var(--grey);
+    background-color: var(--lightGrey);
+    width: 100%;
+    color: #444;
+    min-height: 300px;
+  }
   .file-container {
     display: grid;
     height: calc(100% - var(--headerHeight));
@@ -123,7 +170,7 @@
   .data-grid {
     display: grid;
     grid-template-columns: 45% 50%;
-    gap: 0;
+    gap: 8px;
     margin: auto;
     max-width: 1200px;
     padding-top: 20px;
@@ -131,14 +178,24 @@
 
   .upload-box {
     display: flex;
+    gap: 10px;
     flex-direction: column;
     justify-content: center;
     align-items: center;
     height: 100%;
-    max-height: 50vh;
     margin: auto;
-    border: 5px dashed var(--grey);
     padding: 20px;
+    border: 1px solid #333;
     box-sizing: border-box;
   }
+  .upload-files-container {
+    display: flex;
+    flex-direction: column;
+    gap: 10px;
+    width: 90%;
+  }
+
+  p {
+    margin: 0;
+  }
 </style>