diff options
Diffstat (limited to 'src/site/components/uploader')
| -rw-r--r-- | src/site/components/uploader/Uploader.vue | 57 |
1 files changed, 34 insertions, 23 deletions
diff --git a/src/site/components/uploader/Uploader.vue b/src/site/components/uploader/Uploader.vue index 1b03ff8..2740bee 100644 --- a/src/site/components/uploader/Uploader.vue +++ b/src/site/components/uploader/Uploader.vue @@ -1,7 +1,9 @@ <template> - <div :class="{ 'has-files': alreadyAddedFiles }" + <div + :class="{ 'has-files': alreadyAddedFiles }" class="uploader-wrapper"> - <b-select v-if="loggedIn" + <b-select + v-if="loggedIn" v-model="selectedAlbum" placeholder="Upload to album" size="is-medium" @@ -13,7 +15,8 @@ {{ album.name }} </option> </b-select> - <dropzone v-if="showDropzone" + <dropzone + v-if="showDropzone" id="dropzone" ref="el" :options="dropzoneOptions" @@ -25,16 +28,22 @@ Add or drop more files </label> - <div id="template" + <div + id="template" ref="template"> <div class="dz-preview dz-file-preview"> <div class="dz-details"> - <div class="dz-filename"><span data-dz-name /></div> - <div class="dz-size"><span data-dz-size /></div> + <div class="dz-filename"> + <span data-dz-name /> + </div> + <div class="dz-size"> + <span data-dz-size /> + </div> </div> <div class="result"> <div class="openLink"> - <a class="link" + <a + class="link" target="_blank"> Link </a> @@ -43,14 +52,16 @@ <div class="error"> <div> <span> - <span class="error-message" + <span + class="error-message" data-dz-errormessage /> <i class="icon-web-warning" /> </span> </div> </div> <div class="dz-progress"> - <span class="dz-upload" + <span + class="dz-upload" data-dz-uploadprogress /> </div> <!-- @@ -64,6 +75,8 @@ </template> <script> +import { mapState, mapGetters } from 'vuex'; + import Dropzone from 'nuxt-dropzone'; import '~/assets/styles/dropzone.scss'; @@ -75,20 +88,15 @@ export default { files: [], dropzoneOptions: {}, showDropzone: false, - albums: [], selectedAlbum: null }; }, computed: { - config() { - return this.$store.state.config; - }, - token() { - return this.$store.state.token; - }, - loggedIn() { - return this.$store.state.loggedIn; - } + ...mapState({ + config: (state) => state.config, + albums: (state) => state.albums.tinyDetails + }), + ...mapGetters({ loggedIn: 'auth/isLoggedIn', token: 'auth/getToken' }) }, watch: { loggedIn() { @@ -129,8 +137,11 @@ export default { Get all available albums so the user can upload directly to one (or several soon™) of them. */ async getAlbums() { - const response = await this.$axios.$get(`albums/dropdown`); - this.albums = response.albums; + try { + await this.$store.dispatch('albums/getTinyDetails'); + } catch (e) { + this.$store.dispatch('alert/set', { text: e.message, error: true }, { root: true }); + } this.updateDropzoneConfig(); }, @@ -150,7 +161,7 @@ export default { /* Dropzone stuff */ - dropzoneFilesAdded(files) { + dropzoneFilesAdded() { this.alreadyAddedFiles = true; }, dropzoneSuccess(file, response) { @@ -161,6 +172,7 @@ export default { text: 'There was an error uploading this file. Check the console.', error: true }); + // eslint-disable-next-line no-console console.error(file, message, xhr); }, async dropzoneChunksUploaded(file, done) { @@ -175,7 +187,6 @@ export default { }); this.processResult(file, data); - this.$forceUpdate(); return done(); }, |