From ada68887a2e6a4a552c1d093f5ec1afaebd918d3 Mon Sep 17 00:00:00 2001
From: Philipp Dormann <philipp.dormann1@gmail.com>
Date: Wed, 30 Dec 2020 10:37:10 +0100
Subject: [PATCH] =?UTF-8?q?filepond=20integration=20=E2=9C=85?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 package.json                     |  2 ++
 src/components/Dashboard.svelte  |  4 ++++
 src/components/FileUpload.svelte | 28 ++++++++++++++++++++++++++++
 3 files changed, 34 insertions(+)
 create mode 100644 src/components/FileUpload.svelte

diff --git a/package.json b/package.json
index 17f5ebc6..9e7aec60 100644
--- a/package.json
+++ b/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",
diff --git a/src/components/Dashboard.svelte b/src/components/Dashboard.svelte
index 50977771..8dafdf87 100644
--- a/src/components/Dashboard.svelte
+++ b/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>
diff --git a/src/components/FileUpload.svelte b/src/components/FileUpload.svelte
new file mode 100644
index 00000000..496fc8cd
--- /dev/null
+++ b/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>