Show loading indicator on file assembling

Signed-off-by: Kostiantyn Miakshyn <[email protected]>
nextcloud-libraries · Oct 27, 2024 · c468ae8 · c468ae8
1 parent 19aa6bd
commit c468ae8
Show file tree

Hide file tree

Showing 2 changed files with 47 additions and 22 deletions.
diff --git a/lib/components/UploadPicker.vue b/lib/components/UploadPicker.vue
@@ -126,6 +126,11 @@
 			</template>
 		</NcButton>
 
+		<div v-show="isAssembling" class="upload-picker__loading">
+			<NcLoadingIcon />
+			<p>{{ t('Merging uploaded chunks into a file') }}</p>
+		</div>
+
 		<!-- Hidden files picker input -->
 		<input ref="input"
 			:accept="accept?.join?.(', ')"
@@ -144,14 +149,15 @@ import type { Upload } from '../upload.ts'
 
 import { Folder, NewMenuEntryCategory, getNewFileMenuEntries } from '@nextcloud/files'
 import makeEta from 'simple-eta'
-import Vue from 'vue'
+import { defineComponent } from 'vue'
 
 import NcActionButton from '@nextcloud/vue/dist/Components/NcActionButton.js'
 import NcActionCaption from '@nextcloud/vue/dist/Components/NcActionCaption.js'
 import NcActionSeparator from '@nextcloud/vue/dist/Components/NcActionSeparator.js'
 import NcActions from '@nextcloud/vue/dist/Components/NcActions.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
 import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
+import NcLoadingIcon from '@nextcloud/vue/dist/Components/NcLoadingIcon.js'
 import NcProgressBar from '@nextcloud/vue/dist/Components/NcProgressBar.js'
 
 import IconCancel from 'vue-material-design-icons/Cancel.vue'
@@ -166,7 +172,7 @@ import { t } from '../utils/l10n.ts'
 import logger from '../utils/logger.ts'
 import { uploadConflictHandler } from '../utils/conflicts.ts'
 
-export default Vue.extend({
+export default defineComponent({
 	name: 'UploadPicker',
 
 	components: {
@@ -180,6 +186,7 @@ export default Vue.extend({
 		NcActions,
 		NcButton,
 		NcIconSvgWrapper,
+		NcLoadingIcon,
 		NcProgressBar,
 	},
 
@@ -293,7 +300,7 @@ export default Vue.extend({
 			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.FAILED).length !== 0
 		},
 		isUploading() {
-			return this.queue?.length > 0
+			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.UPLOADING).length !== 0
 		},
 		isAssembling() {
 			return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.ASSEMBLING).length !== 0
@@ -394,7 +401,6 @@ export default Vue.extend({
 			return Array.isArray(this.content) ? this.content : await this.content(path)
 		},
 
-
 		/**
 		 * Start uploading
 		 */
@@ -507,6 +513,12 @@ $progress-width: 200px;
 	&--paused &__progress {
 		animation: breathing 3s ease-out infinite normal;
 	}
+
+	&__loading {
+		display: flex;
+		margin-left: 8px;
+		gap: 8px;
+	}
 }
 
 @keyframes breathing {

diff --git a/lib/uploader.ts b/lib/uploader.ts
@@ -2,27 +2,34 @@
  * SPDX-FileCopyrightText: 2022 Nextcloud GmbH and Nextcloud contributors
  * SPDX-License-Identifier: AGPL-3.0-or-later
  */
-import type { AxiosError, AxiosResponse } from 'axios'
-import type { WebDAVClient } from 'webdav'
-import type { IDirectory } from './utils/fileTree'
-
-import { getCurrentUser } from '@nextcloud/auth'
-import { FileType, Folder, Permission, davGetClient, davRemoteURL, davRootPath } from '@nextcloud/files'
-import { encodePath } from '@nextcloud/paths'
-import { normalize } from 'path'
-
-import axios, { isCancel } from '@nextcloud/axios'
+import type {AxiosError, AxiosResponse} from 'axios'
+import type {WebDAVClient} from 'webdav'
+import type {IDirectory} from './utils/fileTree'
+
+import {getCurrentUser} from '@nextcloud/auth'
+import {
+	davGetClient,
+	davRemoteURL,
+	davRootPath,
+	FileType,
+	Folder,
+	Permission
+} from '@nextcloud/files'
+import {encodePath} from '@nextcloud/paths'
+import {normalize} from 'path'
+
+import axios, {isCancel} from '@nextcloud/axios'
 import PCancelable from 'p-cancelable'
 import PQueue from 'p-queue'
 
-import { getChunk, initChunkWorkspace, uploadData } from './utils/upload.js'
-import { getMaxChunksSize } from './utils/config.js'
-import { Status as UploadStatus, Upload } from './upload.js'
-import { isFileSystemFileEntry } from './utils/filesystem.js'
-import { Directory } from './utils/fileTree.js'
-import { t } from './utils/l10n.js'
+import {getChunk, initChunkWorkspace, uploadData} from './utils/upload.js'
+import {getMaxChunksSize} from './utils/config.js'
+import {Status as UploadStatus, Upload} from './upload.js'
+import {isFileSystemFileEntry} from './utils/filesystem.js'
+import {Directory} from './utils/fileTree.js'
+import {t} from './utils/l10n.js'
 import logger from './utils/logger.js'
-import { getCapabilities } from '@nextcloud/capabilities'
+import {getCapabilities} from '@nextcloud/capabilities'
 
 export enum Status {
 	IDLE = 0,
@@ -508,6 +515,11 @@ export class Uploader {
 					await Promise.all(chunksQueue)
 					this.updateStats()
 
+					// re-add upload because it was reset
+					this._uploadQueue.push(upload)
+					upload.status = UploadStatus.ASSEMBLING
+					this.updateStats()
+
 					upload.response = await axios.request({
 						method: 'MOVE',
 						url: `${tempUrl}/.file`,
@@ -519,8 +531,9 @@ export class Uploader {
 						},
 					})
 
-					this.updateStats()
+					this._uploadQueue.push(upload)
 					upload.status = UploadStatus.FINISHED
+					this.updateStats()
 					logger.debug(`Successfully uploaded ${file.name}`, { file, upload })
 					resolve(upload)
 				} catch (error) {