chore: prepare for filepond

7 files changed, 139 insertions, 5 deletions

diff --git a/nuxt.config.js b/nuxt.config.js
index f534c1c..af61fd2 100644
--- a/nuxt.config.js
+++ b/nuxt.config.js
@@ -60,7 +60,8 @@ export default {
 		'~/plugins/v-clipboard',
 		'~/plugins/vue-isyourpasswordsafe',
 		'~/plugins/vue-timeago',
-		'~/plugins/flexsearch'
+		'~/plugins/flexsearch',
+		'~/plugins/vuebar'
 	],
 	serverMiddleware: [
 		{ path: '/', handler: serveStatic(path.join(__dirname, 'uploads')) }
diff --git a/package.json b/package.json
index 352a29b..b469047 100644
--- a/package.json
+++ b/package.json
@@ -46,6 +46,7 @@
 		"express": "^4.16.4",
 		"express-rate-limit": "^3.4.0",
 		"file-saver": "^2.0.1",
+		"filepond": "^4.7.2",
 		"flexsearch": "^0.6.22",
 		"fluent-ffmpeg": "^2.1.2",
 		"fs-jetpack": "^2.2.2",
@@ -69,10 +70,12 @@
 		"uuid": "^3.3.2",
 		"v-clipboard": "^2.2.1",
 		"vue-axios": "^2.1.4",
+		"vue-filepond": "^5.1.3",
 		"vue-isyourpasswordsafe": "^1.0.2",
 		"vue-plyr": "^5.1.0",
 		"vue-timeago": "^3.4.4",
-		"vue2-transitions": "^0.2.3"
+		"vue2-transitions": "^0.2.3",
+		"vuebar": "^0.0.20"
 	},
 	"devDependencies": {
 		"autoprefixer": "^9.4.7",
diff --git a/src/site/components/uploader/Filepond.vue b/src/site/components/uploader/Filepond.vue
new file mode 100644
index 0000000..1ee5288
--- /dev/null
+++ b/src/site/components/uploader/Filepond.vue
@@ -0,0 +1,97 @@
+<template>
+	<file-pond
+		ref="pond"
+		name="test"
+		class="pond"
+		class-name="my-pond"
+		label-idle="Drop files here or click to browse"
+		:allow-multiple="true"
+		:files="myFiles"
+		:max-files="1000"
+		:chunk-uploads="true"
+		:chunk-size:="50 * 1000000"
+		:server="server"
+		@init="handleFilePondInit"
+		@error="handleFilePondError"
+		@addfile="handleFilePondAddFile" />
+</template>
+
+<script>
+// Import Vue FilePond
+import vueFilePond from 'vue-filepond';
+
+// Import FilePond styles
+import 'filepond/dist/filepond.min.css';
+
+// Import FilePond plugins
+// Please note that you need to install these plugins separately
+
+// Import image preview plugin styles
+// import 'filepond-plugin-image-preview/dist/filepond-plugin-image-preview.min.css';
+
+// Import image preview and file type validation plugins
+// import FilePondPluginFileValidateType from 'filepond-plugin-file-validate-type';
+// import FilePondPluginImagePreview from 'filepond-plugin-image-preview';
+
+// Create component
+const FilePond = vueFilePond(); // FilePondPluginFileValidateType, FilePondPluginImagePreview);
+
+export default {
+	components: {
+		FilePond
+	},
+	data() {
+		return {
+			myFiles: [],
+			server: {
+				url: 'http://localhost:5000',
+				process: {
+					url: '/api/upload',
+					method: 'POST',
+					headers: {
+						'Accept': 'application/vnd.lolisafe.json'
+					},
+					timeout: 300000, // 5 minutes
+					onload: response => console.log(response)
+				}
+			}
+		};
+	},
+	methods: {
+		handleFilePondInit() {
+			console.log('FilePond has initialized');
+			console.log(this.$refs.pond);
+			// FilePond instance methods are available on `this.$refs.pond`
+		},
+		handleFilePondError(error) {
+			console.log(error);
+		},
+		handleFilePondAddFile(error, file) {
+			console.log(error, file);
+		}
+	}
+};
+</script>
+<style lang="scss">
+.pond {
+	width: 400px;
+	margin: 0 auto;
+
+	.filepond--browser.filepond--browser {
+		height: 100%;
+		padding-top: 1.75rem;
+		top: 0;
+		left: 0;
+		width: 100%;
+		cursor: pointer;
+	}
+}
+
+.pond.mini {
+	position: absolute;
+	width: 300px;
+	height: auto;
+	top: calc(50% - 40px);
+	left: calc(50% - 150px);
+}
+</style>
diff --git a/src/site/layouts/default.vue b/src/site/layouts/default.vue
index c0b2407..bd6f134 100644
--- a/src/site/layouts/default.vue
+++ b/src/site/layouts/default.vue
@@ -1,8 +1,17 @@
 <template>
-	<nuxt />
+	<div v-bar>
+		<div>
+			<div class="layout">
+				<!--<Uploader />-->
+				<nuxt-child id="app" />
+			</div>
+		</div>
+	</div>
 </template>
 <script>
+import Uploader from '~/components/uploader/Filepond.vue';
 export default {
+	components: { Uploader },
 	computed: {
 		config() {
 			return this.$store.state.config;
@@ -33,6 +42,8 @@ export default {
 };
 </script>
 <style lang="scss">
+	html { overflow: hidden !important; }
+	.layout { height: 100vh; }
 	@import "~/assets/styles/style.scss";
 	@import "~/assets/styles/icons.min.css";
 </style>
diff --git a/src/site/pages/index.vue b/src/site/pages/index.vue
index 8c33cde..0fcb4de 100644
--- a/src/site/pages/index.vue
+++ b/src/site/pages/index.vue
@@ -64,7 +64,8 @@
 						</div>
 					</div>
 					<div class="spacer mt7" />
-					<Uploader v-if="(config.publicMode) || (!config.publicMode && loggedIn)" />
+					<Uploader v-if="config.publicMode || (!config.publicMode && loggedIn)" />
+					<!--<Filepond v-if="config.publicMode || (!config.publicMode && loggedIn)" />-->
 					<div v-else>
 						This site has disabled public uploads. You need an account.
 					</div>
@@ -84,6 +85,7 @@ import Navbar from '~/components/navbar/Navbar.vue';
 import Logo from '~/components/logo/Logo.vue';
 import Uploader from '~/components/uploader/Uploader.vue';
 import Links from '~/components/home/links/Links.vue';
+import Filepond from '~/components/uploader/Filepond.vue';
 
 export default {
 	name: 'Home',
@@ -91,7 +93,8 @@ export default {
 		Navbar,
 		Logo,
 		Uploader,
-		Links
+		Links,
+		Filepond
 	},
 	data() {
 		return { albums: [] };
diff --git a/src/site/plugins/vuebar.js b/src/site/plugins/vuebar.js
new file mode 100644
index 0000000..18dd4e5
--- /dev/null
+++ b/src/site/plugins/vuebar.js
@@ -0,0 +1,4 @@
+import Vue from 'vue';
+import Vuebar from 'vuebar';
+
+Vue.use(Vuebar);
diff --git a/yarn.lock b/yarn.lock
index 0c1cd28..4d12d34 100644
--- a/yarn.lock
+++ b/yarn.lock
@@ -3529,6 +3529,11 @@ [email protected]:
   resolved "https://registry.yarnpkg.com/file-uri-to-path/-/file-uri-to-path-1.0.0.tgz#553a7b8446ff6f684359c445f1e37a05dacc33dd"
   integrity sha512-0Zt+s3L7Vf1biwWZ29aARiVYLx7iMGnEUl9x33fbB/j3jR81u/O2LbqK+Bm1CDSNDKVtJ/YjwY7TUd5SkeLQLw==
 
+filepond@^4.7.2:
+  version "4.7.2"
+  resolved "https://registry.yarnpkg.com/filepond/-/filepond-4.7.2.tgz#5b61d4b437c0e0f9cad7afcb9ffc6e9d16c0ceec"
+  integrity sha512-OqG35MnmvrGnq2KgHO0PS8uujzRqQL/bMlSy0StqRn6RRAM6wBM9gzQl22IvWLwMyw6g8aIZTZAhMaiTS1LZsA==
+
 filesize@^3.6.1:
   version "3.6.1"
   resolved "https://registry.yarnpkg.com/filesize/-/filesize-3.6.1.tgz#090bb3ee01b6f801a8a8be99d31710b3422bb317"
@@ -8718,6 +8723,11 @@ vue-eslint-parser@^5.0.0:
     esquery "^1.0.1"
     lodash "^4.17.11"
 
+vue-filepond@^5.1.3:
+  version "5.1.3"
+  resolved "https://registry.yarnpkg.com/vue-filepond/-/vue-filepond-5.1.3.tgz#de9bb492492f143e6877a65e9fa1bd8efb55671d"
+  integrity sha512-XUq92twmXwUzKQZw43dMQyRrOZSqvipzSGMY1Km+UNZwQcV5fqvzymtc3JpsLbAdYMkxK1xtmyulJ4Xs7BnrzA==
+
 vue-hot-reload-api@^2.3.0:
   version "2.3.2"
   resolved "https://registry.yarnpkg.com/vue-hot-reload-api/-/vue-hot-reload-api-2.3.2.tgz#1fcc1495effe08a790909b46bf7b5c4cfeb6f21b"
@@ -8825,6 +8835,11 @@ vue@^2.5.22:
   resolved "https://registry.yarnpkg.com/vue/-/vue-2.6.6.tgz#dde41e483c11c46a7bf523909f4f2f816ab60d25"
   integrity sha512-Y2DdOZD8sxApS+iUlwv1v8U1qN41kq6Kw45lM6nVZKhygeWA49q7VCCXkjXqeDBXgurrKWkYQ9cJeEJwAq0b9Q==
 
+vuebar@^0.0.20:
+  version "0.0.20"
+  resolved "https://registry.yarnpkg.com/vuebar/-/vuebar-0.0.20.tgz#fd6313c2d3a2202c49e42419fe1d9ef126134200"
+  integrity sha512-Pq72X10Yl5QyQPcX4hR8KdhA2o+qpqzOdwkoIHUnAJfXWLODBKJhUPAnWvKvBcgst0HuHASLDrcFBSQz98gd9g==
+
 vuex@^3.1.0:
   version "3.1.0"
   resolved "https://registry.yarnpkg.com/vuex/-/vuex-3.1.0.tgz#634b81515cf0cfe976bd1ffe9601755e51f843b9"