filepond integration ✅

package.json

@@ -7,8 +7,10 @@
 	},
 	"dependencies": {
 		"@odit/lfk-client-js": "^0.0.5",
+		"filepond": "^4.25.1",
 		"gridjs": "^3.2.0",
 		"nanoid": "^3.1.20",
+		"svelte-filepond": "^0.0.1",
 		"svelte-i18n": "^3.3.0",
 		"svelte-spa-router": "^3.1.0",
 		"tailwindcss": "^2.0.2",

src/components/Dashboard.svelte

@@ -9,6 +9,7 @@
   import NotFound from "./NotFound.svelte";
   import Sidebar from "./Sidebar.svelte";
   import DataTable from "./DataTable.svelte";
+  import FileUpload from "./FileUpload.svelte";
   //
   let isProfileActionsVisible = false;
   let mobile_menu_opened = false;
@@ -297,6 +298,9 @@
   </div>
   <main>
     <div class="max-w-7xl mx-auto py-6 sm:px-6 lg:px-8">
+      <div class="mb-8">
+        <FileUpload />
+      </div>
       <div class="mb-8">
         <DataTable />
       </div>

src/components/FileUpload.svelte

@@ -0,0 +1,28 @@
+<script>
+  import FilePond, { registerPlugin, supported } from "svelte-filepond";
+  let pond;
+  // pond.getFiles() will return the active files
+  // the name to use for the internal file input
+  let name = "filepond";
+  function handleInit() {
+    console.log("FilePond has initialised");
+  }
+  function handleAddFile(err, fileItem) {
+    console.log("A file has been added", fileItem);
+  }
+</script>
+
+<style>
+  @import "filepond/dist/filepond.css";
+</style>
+
+<div class="app">
+  <FilePond
+    bind:this={pond}
+    {name}
+    server="/api"
+    allowMultiple={false}
+    credits={false}
+    oninit={handleInit}
+    onaddfile={handleAddFile} />
+</div>