diff options
Diffstat (limited to 'src/site')
| -rw-r--r-- | src/site/components/uploader/Filepond.vue | 97 | ||||
| -rw-r--r-- | src/site/layouts/default.vue | 13 | ||||
| -rw-r--r-- | src/site/pages/index.vue | 7 | ||||
| -rw-r--r-- | src/site/plugins/vuebar.js | 4 |
4 files changed, 118 insertions, 3 deletions
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); |