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>
@@ -88,6 +91,7 @@ import AudioPlayer from './AudioPlayer.vue'
 import { useViewer } from '../../../../../composables/useViewer.js'
 import { SHARED_ITEM } from '../../../../../constants.js'
 import { useSharedItemsStore } from '../../../../../stores/sharedItems.js'
+import { getUploader } from '@nextcloud/upload'
 
 const PREVIEW_TYPE = {
 	TEMPORARY: 0,
@@ -282,6 +286,7 @@ export default {
 		return {
 			isLoading: true,
 			failed: false,
+			uploadManager: getUploader(),
 		}
 	},
 	computed: {
@@ -506,13 +511,23 @@ export default {
 			return this.id.startsWith('temp') && this.index && this.uploadId
 		},
 
+		uploadStatus() {
+			return this.$store.getters.uploadStatus(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') {
+				return 100
 			}
-			// likely never reached
+
+			if (this.uploadStatus === 'uploading') {
+				return (this.uploadManager.info.progress / this.uploadManager.info.size * 100) || 0
+			}
+
 			return 0
 		},
 
@@ -610,6 +625,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'
@@ -88,12 +89,8 @@ 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
 	},
 
 	currentUploadId: (state) => {
@@ -127,7 +124,6 @@ const mutations = {
 			file,
 			status: 'initialised',
 			totalSize: file.size,
-			uploadedSize: 0,
 			temporaryMessage,
 		 })
 		Vue.set(state.localUrls, temporaryMessage.referenceId, localUrl)
@@ -169,11 +165,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 +289,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,
@@ -317,11 +306,12 @@ const actions = {
 		const performUpload = async ([index, uploadedFile]) => {
 			// currentFile to be uploaded
 			const currentFile = uploadedFile.file
-			// userRoot path
 			const fileName = (currentFile.newName || currentFile.name)
 			// Candidate rest of the path
 			const path = getters.getAttachmentFolder() + '/' + fileName
 
+			// mark all files as uploading
+			commit('markFileAsUploading', { uploadId, index })
 			// Check if previous propfind attempt was stored
 			const promptPath = getFileNamePrompt(path)
 			const knownSuffix = knownPaths[promptPath]
@@ -330,15 +320,7 @@ 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,
-				})
+				await uploader.upload(uniquePath, currentFile)
 				// Path for the sharing request
 				const sharePath = '/' + uniquePath
 				// Mark the file as uploaded in the store
@@ -395,6 +377,7 @@ const actions = {
 
 		const client = getDavClient()
 		const userRoot = '/files/' + getters.getUserId()
+		const uploader = getUploader()
 
 		const uploads = getters.getUploadsArray(uploadId)
 		// Check for duplicate names in the uploads array