Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Show loading indicator on file assembling #1458

Closed
wants to merge 2 commits into from
Closed

Show loading indicator on file assembling #1458

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
58e4d3f
feat: Show loading indicator on file assembling
Koc Oct 26, 2024
06f3802
feat: Show loading indicator on file assembling (changes after rebase)
Koc Dec 11, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
3 changes: 3 additions & 0 deletions l10n/messages.pot
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -79,6 +79,9 @@ msgstr ""
msgid "Preview image"
msgstr ""

msgid "Processing..."
msgstr ""

msgid "Rename"
msgstr ""

Expand Down
20 changes: 16 additions & 4 deletions lib/components/UploadPicker.vue
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -126,6 +126,11 @@
</template>
</NcButton>

<div v-show="!isUploading && isAssembling" class="upload-picker__loading">
<NcLoadingIcon />
<p>{{ t('Processing...') }}</p>
</div>

<!-- Hidden files picker input -->
<input ref="input"
:accept="accept?.join?.(', ')"
Expand All @@ -144,14 +149,15 @@

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'
Expand All @@ -166,7 +172,7 @@
import logger from '../utils/logger.ts'
import { uploadConflictHandler } from '../utils/conflicts.ts'

export default Vue.extend({
export default defineComponent({
name: 'UploadPicker',

components: {
Expand All @@ -180,6 +186,7 @@
NcActions,
NcButton,
NcIconSvgWrapper,
NcLoadingIcon,
NcProgressBar,
},

Expand Down Expand Up @@ -293,7 +300,7 @@
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

Check warning on line 303 in lib/components/UploadPicker.vue

View check run for this annotation

Codecov / codecov/patch

lib/components/UploadPicker.vue#L303 

Added line #L303 was not covered by tests
},
isAssembling() {
return this.queue?.filter((upload: Upload) => upload.status === UploadStatus.ASSEMBLING).length !== 0
Expand Down Expand Up @@ -394,7 +401,6 @@
return Array.isArray(this.content) ? this.content : await this.content(path)
},


/**
* Start uploading
*/
Expand Down Expand Up @@ -507,6 +513,12 @@
&--paused &__progress {
animation: breathing 3s ease-out infinite normal;
}

&__loading {
display: flex;
margin-left: 8px;
gap: 8px;
}
}

@keyframes breathing {
Expand Down
13 changes: 11 additions & 2 deletions lib/uploader.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,7 +7,14 @@
import type { IDirectory } from './utils/fileTree'

import { getCurrentUser } from '@nextcloud/auth'
import { FileType, Folder, Permission, davGetClient, davRemoteURL, davRootPath } from '@nextcloud/files'
import {
davGetClient,
davRemoteURL,
davRootPath,
FileType,
Folder,
Permission,
} from '@nextcloud/files'
import { encodePath } from '@nextcloud/paths'
import { normalize } from 'path'

Expand Down Expand Up @@ -510,6 +517,7 @@
try {
// Once all chunks are sent, assemble the final file
await Promise.all(chunksQueue)
upload.status = UploadStatus.ASSEMBLING

Check warning on line 520 in lib/uploader.ts

View check run for this annotation

Codecov / codecov/patch

lib/uploader.ts#L520 

Added line #L520 was not covered by tests
this.updateStats()

upload.response = await axios.request({
Expand All @@ -523,8 +531,8 @@
},
})

this.updateStats()
upload.status = UploadStatus.FINISHED
this.updateStats()

Check warning on line 535 in lib/uploader.ts

View check run for this annotation

Codecov / codecov/patch

lib/uploader.ts#L535 

Added line #L535 was not covered by tests
logger.debug(`Successfully uploaded ${file.name}`, { file, upload })
resolve(upload)
} catch (error) {
Expand Down Expand Up @@ -570,6 +578,7 @@

// Update progress
upload.uploaded = upload.size
upload.status = UploadStatus.FINISHED

Check warning on line 581 in lib/uploader.ts

View check run for this annotation

Codecov / codecov/patch

lib/uploader.ts#L581 

Added line #L581 was not covered by tests
this.updateStats()

// Resolve
Expand Down
Loading