From 2eaf46185d0a6d207263b2dfe6377ee6b381a329 Mon Sep 17 00:00:00 2001 From: Maksim Sukharev Date: Mon, 11 Dec 2023 18:33:37 +0100 Subject: [PATCH] WIP Signed-off-by: Maksim Sukharev --- .../Message/MessagePart/FilePreview.vue | 33 +++++++++++++++---- src/store/fileUploadStore.js | 31 ++++------------- 2 files changed, 34 insertions(+), 30 deletions(-) diff --git a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue index ffb34930c9fd..44c5391f6020 100644 --- a/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue +++ b/src/components/MessagesList/MessagesGroup/Message/MessagePart/FilePreview.vue @@ -49,6 +49,10 @@ :class="previewImageClass" alt="" :src="defaultIconUrl"> + -
{{ fileDetail }}
@@ -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; diff --git a/src/store/fileUploadStore.js b/src/store/fileUploadStore.js index 5478be2f5889..3c5a20bef014 100644 --- a/src/store/fileUploadStore.js +++ b/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