WIP

Signed-off-by: Maksim Sukharev <antreesy.web@gmail.com>

src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue

@@ -49,6 +49,10 @@
 				:class="previewImageClass"
 				alt=""
 				:src="defaultIconUrl">
+			<NcProgressBar v-if="isTemporaryUpload && !isUploadEditor"
+				class="file-preview__progress"
+				size="medium"
+				:value="uploadProgress" />
 		</div>
 		<span v-else-if="isLoading"
 			v-tooltip="previewTooltip"
@@ -64,7 +68,6 @@
 				<Close />
 			</template>
 		</NcButton>
-		<NcProgressBar v-if="isTemporaryUpload && !isUploadEditor" :value="uploadProgress" />
 		<div v-if="shouldShowFileDetail" class="name-container">
 			{{ fileDetail }}
 		</div>
@@ -78,6 +81,7 @@ import PlayCircleOutline from 'vue-material-design-icons/PlayCircleOutline.vue'
 import { getCapabilities } from '@nextcloud/capabilities'
 import { encodePath } from '@nextcloud/paths'
 import { generateUrl, imagePath, generateRemoteUrl } from '@nextcloud/router'
+import { getUploader } from '@nextcloud/upload'
 
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
@@ -282,6 +286,7 @@ export default {
 		return {
 			isLoading: true,
 			failed: false,
+			uploadManager: getUploader(),
 		}
 	},
 	computed: {
@@ -506,13 +511,29 @@ export default {
 			return this.id.startsWith('temp') && this.index && this.uploadId
 		},
 
+		uploadStatus() {
+			return this.$store.getters.uploadStatus(this.uploadId, this.index)
+		},
+
+		uploadPath() {
+			return this.$store.getters.uploadPath(this.uploadId, this.index)
+		},
+
 		uploadProgress() {
-			if (this.isTemporaryUpload) {
-				if (this.$store.getters.uploadProgress(this.uploadId, this.index)) {
-					return this.$store.getters.uploadProgress(this.uploadId, this.index)
-				}
+			if (!this.isTemporaryUpload) {
+				return 0
+			}
+
+			if (this.uploadStatus === 'successUpload'
+				|| this.uploadStatus === 'sharing'
+				|| this.uploadStatus === 'shared') {
+				return 100
+			}
+
+			if (this.uploadStatus === 'uploading') {
+				return (this.uploadManager.info.progress / this.uploadManager.info.size * 100) || 0
 			}
-			// likely never reached
+
 			return 0
 		},
 
@@ -610,6 +631,12 @@ export default {
 		transition: outline 0.1s ease-in-out;
 	}
 
+	&__progress {
+		position: absolute;
+		bottom: 0;
+		left: 0;
+	}
+
 	.loading {
 		display: inline-block;
 		min-width: 32px;

src/store/fileUploadStore.js

@@ -25,6 +25,7 @@ import Vue from 'vue'
 import { showError } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import moment from '@nextcloud/moment'
+import { getUploader } from '@nextcloud/upload'
 
 import { getDavClient } from '../services/DavClient.js'
 import { EventBus } from '../services/EventBus.js'
@@ -41,6 +42,8 @@ import {
 	separateDuplicateUploads,
 } from '../utils/fileUpload.js'
 
+const uploader = getUploader()
+
 const state = {
 	attachmentFolder: loadState('spreed', 'attachment_folder', ''),
 	attachmentFolderFreeSpace: loadState('spreed', 'attachment_folder_free_space', 0),
@@ -88,12 +91,12 @@ const getters = {
 		return state.localUrls[referenceId]
 	},
 
-	uploadProgress: (state) => (uploadId, index) => {
-		if (state.uploads[uploadId].files[index]) {
-			return state.uploads[uploadId].files[index].uploadedSize / state.uploads[uploadId].files[index].totalSize * 100
-		} else {
-			return 0
-		}
+	uploadStatus: (state) => (uploadId, index) => {
+		return state.uploads[uploadId]?.files[index]?.status
+	},
+
+	uploadPath: (state) => (uploadId, index) => {
+		return state.uploads[uploadId]?.files[index]?.sharePath
 	},
 
 	currentUploadId: (state) => {
@@ -127,7 +130,6 @@ const mutations = {
 			file,
 			status: 'initialised',
 			totalSize: file.size,
-			uploadedSize: 0,
 			temporaryMessage,
 		 })
 		Vue.set(state.localUrls, temporaryMessage.referenceId, localUrl)
@@ -139,14 +141,14 @@ const mutations = {
 	},
 
 	// Marks a given file as uploaded
-	markFileAsSuccessUpload(state, { uploadId, index, sharePath }) {
+	markFileAsSuccessUpload(state, { uploadId, index }) {
 		state.uploads[uploadId].files[index].status = 'successUpload'
-		Vue.set(state.uploads[uploadId].files[index], 'sharePath', sharePath)
 	},
 
 	// Marks a given file as uploading
-	markFileAsUploading(state, { uploadId, index }) {
+	markFileAsUploading(state, { uploadId, index, sharePath }) {
 		state.uploads[uploadId].files[index].status = 'uploading'
+		Vue.set(state.uploads[uploadId].files[index], 'sharePath', sharePath)
 	},
 
 	// Marks a given file as sharing
@@ -169,11 +171,6 @@ const mutations = {
 		state.attachmentFolder = attachmentFolder
 	},
 
-	// Sets uploaded amount of bytes
-	setUploadedSize(state, { uploadId, index, uploadedSize }) {
-		state.uploads[uploadId].files[index].uploadedSize = uploadedSize
-	},
-
 	// Set temporary message for each file
 	setTemporaryMessageForFile(state, { uploadId, index, temporaryMessage }) {
 		console.debug('uploadId: ' + uploadId + ' index: ' + index)
@@ -298,8 +295,6 @@ const actions = {
 		// If caption is provided, attach to the last temporary message
 		const lastIndex = getters.getUploadsArray(uploadId).at(-1).at(0)
 		for (const [index, uploadedFile] of getters.getUploadsArray(uploadId)) {
-			// mark all files as uploading
-			commit('markFileAsUploading', { uploadId, index })
 			// Store the previously created temporary message
 			const temporaryMessage = {
 				...uploadedFile.temporaryMessage,
@@ -330,19 +325,11 @@ const actions = {
 			knownPaths[promptPath] = suffix
 
 			try {
-				// Upload the file
-				const currentFileBuffer = await new Blob([currentFile]).arrayBuffer()
-				await client.putFileContents(userRoot + uniquePath, currentFileBuffer, {
-					onUploadProgress: progress => {
-						const uploadedSize = progress.loaded
-						commit('setUploadedSize', { state, uploadId, index, uploadedSize })
-					},
-					contentLength: currentFile.size,
-				})
 				// Path for the sharing request
 				const sharePath = '/' + uniquePath
-				// Mark the file as uploaded in the store
-				commit('markFileAsSuccessUpload', { uploadId, index, sharePath })
+				commit('markFileAsUploading', { uploadId, index, sharePath })
+				await uploader.upload(uniquePath, currentFile)
+				commit('markFileAsSuccessUpload', { uploadId, index })
 			} catch (exception) {
 				let reason = 'failed-upload'
 				if (exception.response) {