src/components/lists/settings/background.vue

@@ -1,6 +1,5 @@
 <template>
 	<div
-			v-if="unsplashBackgroundEnabled"
 			class="card list-background-setting loader-container"
 			:class="{ 'is-loading': backgroundService.loading}">
 		<header class="card-header">
@@ -9,7 +8,11 @@
 			</p>
 		</header>
 		<div class="card-content">
-			<div class="content">
+			<div class="content" v-if="uploadBackgroundEnabled">
+				<input type="file" ref="backgroundUploadInput" @change="uploadBackground"/>
+				<a class="button is-primary" @click="$refs.backgroundUploadInput.click()">Upload Background</a>
+			</div>
+			<div class="content" v-if="unsplashBackgroundEnabled">
 				<input
 						type="text"
 						placeholder="Search for a background..."
@@ -51,6 +54,7 @@
 
 <script>
 	import BackgroundUnsplashService from '../../../services/backgroundUnsplash'
+	import BackgroundUploadService from '../../../services/backgroundUpload'
 	import {CURRENT_LIST} from '../../../store/mutation-types'
 
 	export default {
@@ -63,6 +67,8 @@
 				backgroundThumbs: {},
 				currentPage: 1,
 				backgroundSearchTimeout: null,
+
+				backgroundUploadService: null,
 			}
 		},
 		props: {
@@ -75,9 +81,13 @@
 			unsplashBackgroundEnabled() {
 				return this.$store.state.config.enabledBackgroundProviders.includes('unsplash')
 			},
+			uploadBackgroundEnabled() {
+				return this.$store.state.config.enabledBackgroundProviders.includes('upload')
+			},
 		},
 		created() {
 			this.backgroundService = new BackgroundUnsplashService()
+			this.backgroundUploadService = new BackgroundUploadService()
 			// Show the default collection of backgrounds
 			this.newBackgroundSearch()
 		},
@@ -131,6 +141,20 @@
 						this.error(e, this)
 					})
 			},
+			uploadBackground() {
+				if (this.$refs.backgroundUploadInput.files.length === 0) {
+					return
+				}
+
+				this.backgroundUploadService.create(this.listId, this.$refs.backgroundUploadInput.files[0])
+					.then(l => {
+						this.$store.commit(CURRENT_LIST, l)
+						this.success({message: 'The background has been set successfully!'}, this)
+					})
+					.catch(e => {
+						this.error(e, this)
+					})
+			},
 		},
 	}
 </script>

src/services/backgroundUpload.js

@@ -0,0 +1,57 @@
+import AbstractService from './abstractService'
+import ListModel from '../models/list'
+
+export default class BackgroundUploadService extends AbstractService {
+	constructor() {
+		super({
+			create: '/lists/{listId}/backgrounds/upload',
+		})
+	}
+
+	uploadProgress = 0
+
+	useCreateInterceptor() {
+		return false
+	}
+
+	modelCreateFactory(data) {
+		return new ListModel(data)
+	}
+
+	/**
+	 * Uploads a file to the server
+	 * @param listId
+	 * @param file
+	 * @returns {Promise<any|never>}
+	 */
+	create(listId, file) {
+
+		let data = new FormData()
+		data.append('background', new Blob([file]), file.name);
+
+		const cancel = this.setLoading()
+		return this.http.put(
+			this.getReplacedRoute(this.paths.create, {listId: listId}),
+			data,
+			{
+				headers: {
+					'Content-Type':
+						'multipart/form-data; boundary=' + data._boundary,
+				},
+				onUploadProgress: progressEvent => {
+					this.uploadProgress = Math.round((progressEvent.loaded * 100) / progressEvent.total);
+				}
+			}
+		)
+			.catch(error => {
+				return this.errorHandler(error)
+			})
+			.then(response => {
+				return Promise.resolve(this.modelCreateFactory(response.data))
+			})
+			.finally(() => {
+				this.uploadProgress = 0
+				cancel()
+			})
+	}
+}