Fix posting attachments

Signed-off-by: Louis Chemineau <louis@chmn.me>

src/components/Composer/Composer.vue

@@ -402,11 +402,12 @@ export default {
 			this.$refs.fileUploadInput.click()
 		},
 		handleFileChange(event) {
-			const previewUrl = URL.createObjectURL(event.target.files[0])
-			this.previewUrls.push({
-				description: '',
-				url: previewUrl,
-				result: event.target.files[0],
+			event.target.files.forEach((file) => {
+				this.previewUrls.push({
+					description: '',
+					url: URL.createObjectURL(file),
+					result: file,
+				})
 			})
 		},
 		removeAttachment(idx) {
@@ -481,8 +482,8 @@ export default {
 			formData.append('type', this.type)
 			for (const preview of this.previewUrls) {
 				// TODO send the summary and other props too
-				formData.append('attachments', preview.result)
-				formData.append('attachmentDescriptions', preview.description)
+				formData.append('attachments[]', preview.result)
+				formData.append('attachmentDescriptions[]', preview.description)
 			}
 			if (this.replyTo) {
 				formData.append('replyTo', this.replyTo.id)

src/components/PostAttachment.vue

@@ -1,9 +1,15 @@
 <template>
-	<masonry>
-		<div v-for="(item, index) in attachments" :key="index">
-			<img :src="imageUrl(item)" @click="showModal(index)">
+	<div class="post-attachments">
+		<div v-for="(item, index) in attachments"
+			:key="index"
+			class="post-attachment"
+			@click="showModal(index)">
+			<img v-if="item.mimeType.startsWith('image/')" :src="imageUrl(item)">
+			<div v-else>
+				{{ item }}
+			</div>
 		</div>
-		<NcModal v-show="modal"
+		<NcModal v-if="modal"
 			:has-previous="current > 0"
 			:has-next="current < (attachments.length - 1)"
 			size="full"
@@ -14,11 +20,10 @@
 				<canvas ref="modalCanvas" />
 			</div>
 		</NcModal>
-	</masonry>
+	</div>
 </template>
 
 <script>
-
 import serverData from '../mixins/serverData.js'
 import NcModal from '@nextcloud/vue/dist/Components/NcModal.js'
 import { generateUrl } from '@nextcloud/router'
@@ -101,3 +106,28 @@ export default {
 	},
 }
 </script>
+<style lang="scss" scoped>
+.post-attachments {
+	margin-top: 12px;
+	width: 100%;
+	display: flex;
+	gap: 12px;
+	overflow-x: scroll;
+
+	.post-attachment {
+		height: 100px;
+		object-fit: cover;
+		border-radius: var(--border-radius-large);
+		overflow: hidden;
+
+		> * {
+			cursor: pointer;
+		}
+
+		img {
+			width: 100%;
+			height: 100%;
+		}
+	}
+}
+</style>

src/components/TimelineEntry.vue

@@ -27,8 +27,8 @@
 		<UserEntry v-if="item.type === 'SocialAppNotification' && item.details.actor" :key="item.details.actor.id" :item="item.details.actor" />
 		<template v-else>
 			<div class="wrapper">
-				<TimelineAvatar :item="entryContent" />
-				<TimelinePost class="message"
+				<TimelineAvatar class="entry__avatar" :item="entryContent" />
+				<TimelinePost class="entry__content"
 					:item="entryContent"
 					:parent-announce="isBoost" />
 			</div>
@@ -130,9 +130,19 @@ export default {
 		display: flex;
 		margin: auto;
 		padding: 0;
+
 		&:focus {
 			background-color: rgba(47, 47, 47, 0.068);
 		}
+
+		.entry__avatar {
+			flex-shrink: 0;
+		}
+
+		.entry__content {
+			flex-grow: 1;
+			width: 0;
+		}
 	}
 
 	.notification-header {

src/components/TimelinePost.vue

@@ -220,7 +220,6 @@ export default {
 		font-size: 15px;
 		line-height: 1.6em;
 		position: relative;
-		width: 100%;
 
 		::v-deep a.widget-default {
 			text-decoration: none !important;
@@ -276,13 +275,6 @@ export default {
 		}
 	}
 
-	span {
-		/* opacity: 0.5; */
-	}
-	.entry-content {
-		display: flex;
-	}
-
 	.post-header {
 		display: flex;
 		flex-direction: row;