Add ability to upload files by dropping them in the chat

Signed-off-by: Marco Ambrosini <marcoambrosini@pm.me>

src/components/ChatView.vue

@@ -19,8 +19,26 @@
   -->
 
 <template>
-	<div class="chatView">
-		<MessagesList :token="token" />
+	<div
+		class="chatView"
+		@dragover.prevent="isDraggingOver = true"
+		@dragleave.prevent="isDraggingOver = false"
+		@drop.prevent="processFiles">
+		<transition name="fade" mode="out-in">
+			<div
+				v-show="isDraggingOver"
+				class="dragover">
+				<div class="drop-hint">
+					<h3
+						class="drop-hint__text">
+						{{ t('spreed', 'Drop your files here to upload') }}
+					</h3>
+					<div class="icon-upload drop-hint__icon" />
+				</div>
+			</div>
+		</transition>
+		<MessagesList
+			:token="token" />
 		<NewMessageForm />
 	</div>
 </template>
@@ -28,6 +46,7 @@
 <script>
 import MessagesList from './MessagesList/MessagesList'
 import NewMessageForm from './NewMessageForm/NewMessageForm'
+import { shareFile } from '../services/filesSharingServices'
 
 export default {
 
@@ -45,6 +64,45 @@ export default {
 		},
 	},
 
+	data: function() {
+		return {
+			isDraggingOver: false,
+		}
+	},
+
+	methods: {
+		/**
+		 * Uploads and shares the selected files
+		 * @param {object} event the file input event object
+		 */
+		async processFiles(event) {
+			// restore non dragover state
+			this.isDraggingOver = false
+			// Store the token in a variable to prevent changes when changing conversation
+			// when the upload is still running
+			const token = this.token
+			// Create a unique id for the upload operation
+			const uploadId = new Date().getTime()
+			// The selected files array coming from the input
+			const files = Object.values(event.dataTransfer.files)
+			// Process these files in the store
+			await this.$store.dispatch('uploadFiles', { uploadId, token, files })
+			// Get the files that have successfully been uploaded from the store
+			const shareableFiles = this.$store.getters.getShareableFiles(uploadId)
+			// Share each of those files in the conversation
+			for (const index in shareableFiles) {
+				const path = shareableFiles[index].sharePath
+				try {
+					this.$store.dispatch('markFileAsSharing', { uploadId, index })
+					await shareFile(path, token)
+					this.$store.dispatch('markFileAsShared', { uploadId, index })
+				} catch (exception) {
+					console.debug('An error happened when triying to share your file: ', exception)
+				}
+			}
+		},
+	},
+
 }
 </script>
 
@@ -56,4 +114,34 @@ export default {
 	flex-direction: column;
 	flex-grow: 1;
 }
+
+.dragover {
+	width: 100%;
+	height: 100%;
+	background: var(--color-primary-light);
+	z-index: 10;
+}
+
+.drop-hint {
+	margin: auto;
+}
+
+.fade {
+	&-enter {
+		opacity: 0;
+	}
+	&-enter-to {
+		opacity: 1;
+	}
+	&-leave {
+		opacity: 1;
+	}
+	&-leave-to {
+		opacity: 0;
+	}
+	&-enter-active,
+	&-leave-active {
+		transition: all 200ms ease-in-out;
+	}
+}
 </style>