fix(upload): use nextcloud/upload for file uploads

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

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

@@ -82,6 +82,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'
@@ -286,6 +287,8 @@ export default {
 		return {
 			isLoading: true,
 			failed: false,
+			uploadManager: null,
+			isUploadCompleted: false,
 		}
 	},
 	computed: {
@@ -514,13 +517,29 @@ export default {
 			return this.id.startsWith('temp') && this.index && this.uploadId
 		},
 
+		uploadFile() {
+			return this.$store.getters.getUploadFile(this.uploadId, this.index)
+		},
+
+		upload() {
+			return this.uploadManager?.queue.find(item => item._source.includes(this.uploadFile.sharePath))
+		},
+
 		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.isUploadCompleted) {
+				return 100
 			}
-			// likely never reached
+
+			if (this.uploadFile.status === 'uploading') {
+				return this.upload
+					? (this.upload._uploaded / this.upload._size * 100)
+					: 0
+			}
+
 			return 0
 		},
 
@@ -537,6 +556,17 @@ export default {
 		},
 	},
 
+	watch: {
+		isTemporaryUpload(value) {
+			this.uploadManager = value ? getUploader() : null
+		},
+		'uploadFile.status'(value) {
+			if (['successUpload', 'sharing', 'shared'].includes(value)) {
+				this.isUploadCompleted = true
+			}
+		},
+	},
+
 	mounted() {
 		const img = new Image()
 		img.onerror = () => {

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'
@@ -42,6 +43,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),
@@ -104,12 +107,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
-		}
+	getUploadFile: (state) => (uploadId, index) => {
+		return state.uploads[uploadId]?.files[index]
 	},
 
 	currentUploadId: (state) => {
@@ -142,7 +141,6 @@ const mutations = {
 			file,
 			status: 'initialised',
 			totalSize: file.size,
-			uploadedSize: 0,
 			temporaryMessage,
 		 })
 		Vue.set(state.localUrls, temporaryMessage.referenceId, localUrl)
@@ -194,11 +192,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)
@@ -406,23 +399,13 @@ const actions = {
 	 * @param {string} data.uploadId The unique uploadId
 	 */
 	async processUpload(context, { token, uploadId }) {
-		const client = getDavClient()
-		const userRoot = '/files/' + context.getters.getUserId()
-
 		const performUpload = async ([index, uploadedFile]) => {
 			const currentFile = uploadedFile.file
 			const fileName = (currentFile.newName || currentFile.name)
 
 			try {
 				context.commit('markFileAsUploading', { uploadId, index })
-				const currentFileBuffer = await new Blob([currentFile]).arrayBuffer()
-				await client.putFileContents(userRoot + uploadedFile.sharePath, currentFileBuffer, {
-					onUploadProgress: progress => {
-						const uploadedSize = progress.loaded
-						context.commit('setUploadedSize', { state, uploadId, index, uploadedSize })
-					},
-					contentLength: currentFile.size,
-				})
+				await uploader.upload(uploadedFile.sharePath, currentFile)
 				context.commit('markFileAsSuccessUpload', { uploadId, index })
 			} catch (exception) {
 				let reason = 'failed-upload'