Skip to content

Commit 5a6d0df

Browse files
susnuxsusnux
committed
fix(files_sharing): show note, label and list of uploaded files on file drop
This was missing from the Vue migration of the public share view: - Show the note as the description of the file drop - Show the label as the heading of the file drop if available - Show list of uploaded files for verification Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>
1 parent c85f6a6 commit 5a6d0df

File tree

3 files changed

+93
-19
lines changed

3 files changed

+93
-19
lines changed

‎apps/files_sharing/lib/DefaultPublicShareTemplateProvider.php‎

Lines changed: 3 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -91,6 +91,9 @@ public function renderPage(IShare $share, string $token, string $path): Template
9191
'disclaimer',
9292
$this->appConfig->getValueString('core', 'shareapi_public_link_disclaimertext'),
9393
);
94+
// file drops do not request the root folder so we need to provide label and note if available
95+
$this->initialState->provideInitialState('label', $share->getLabel());
96+
$this->initialState->provideInitialState('note', $share->getNote());
9497
}
9598
// Set up initial state
9699
$this->initialState->provideInitialState('isPublic', true);

‎apps/files_sharing/src/files_views/publicFileDrop.ts‎

Lines changed: 4 additions & 3 deletions
Original file line numberDiff line numberDiff line change
@@ -4,7 +4,8 @@
44
*/
55
import type { VueConstructor } from 'vue'
66

7-
import { Folder, Permission, View, davRemoteURL, davRootPath, getNavigation } from '@nextcloud/files'
7+
import { Folder, Permission, View, getNavigation } from '@nextcloud/files'
8+
import { defaultRemoteURL, defaultRootPath } from '@nextcloud/files/dav'
89
import { loadState } from '@nextcloud/initial-state'
910
import { translate as t } from '@nextcloud/l10n'
1011
import svgCloudUpload from '@mdi/svg/svg/cloud-upload.svg?raw'
@@ -45,8 +46,8 @@ export default () => {
4546
// Fake a writeonly folder as root
4647
folder: new Folder({
4748
id: 0,
48-
source: `${davRemoteURL}${davRootPath}`,
49-
root: davRootPath,
49+
source: `${defaultRemoteURL}${defaultRootPath}`,
50+
root: defaultRootPath,
5051
owner: null,
5152
permissions: Permission.CREATE,
5253
}),

‎apps/files_sharing/src/views/FilesViewFileDropEmptyContent.vue‎

Lines changed: 86 additions & 16 deletions
Original file line numberDiff line numberDiff line change
@@ -5,13 +5,29 @@
55
<template>
66
<NcEmptyContent class="file-drop-empty-content"
77
data-cy-files-sharing-file-drop
8-
:name="t('files_sharing', 'File drop')">
8+
:name="name">
99
<template #icon>
1010
<NcIconSvgWrapper :svg="svgCloudUpload" />
1111
</template>
1212
<template #description>
13-
{{ t('files_sharing', 'Upload files to {foldername}.', { foldername }) }}
14-
{{ disclaimer === '' ? '' : t('files_sharing', 'By uploading files, you agree to the terms of service.') }}
13+
<p>
14+
{{ shareNote || t('files_sharing', 'Upload files to {foldername}.', { foldername }) }}
15+
</p>
16+
<p v-if="disclaimer">
17+
{{ t('files_sharing', 'By uploading files, you agree to the terms of service.') }}
18+
</p>
19+
<NcNoteCard v-if="getSortedUploads().length"
20+
class="file-drop-empty-content__note-card"
21+
type="success">
22+
<h2 id="file-drop-empty-content__heading">
23+
{{ t('files_sharing', 'Successfully uploaded files') }}
24+
</h2>
25+
<ul aria-labelledby="file-drop-empty-content__heading" class="file-drop-empty-content__list">
26+
<li v-for="file in getSortedUploads()" :key="file">
27+
{{ file }}
28+
</li>
29+
</ul>
30+
</NcNoteCard>
1531
</template>
1632
<template #action>
1733
<template v-if="disclaimer">
@@ -33,34 +49,88 @@
3349
</NcEmptyContent>
3450
</template>
3551

52+
<script lang="ts">
53+
/* eslint-disable import/first */
54+
55+
// We need this on module level rather than on the instance as view will be refreshed by the files app after uploading
56+
const uploads = new Set<string>()
57+
</script>
58+
3659
<script setup lang="ts">
3760
import { loadState } from '@nextcloud/initial-state'
3861
import { translate as t } from '@nextcloud/l10n'
39-
import { getUploader, UploadPicker } from '@nextcloud/upload'
62+
import { getUploader, UploadPicker, UploadStatus } from '@nextcloud/upload'
4063
import { ref } from 'vue'
4164
42-
import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
43-
import NcDialog from '@nextcloud/vue/dist/Components/NcDialog.js'
44-
import NcEmptyContent from '@nextcloud/vue/dist/Components/NcEmptyContent.js'
45-
import NcIconSvgWrapper from '@nextcloud/vue/dist/Components/NcIconSvgWrapper.js'
65+
import NcButton from '@nextcloud/vue/components/NcButton'
66+
import NcDialog from '@nextcloud/vue/components/NcDialog'
67+
import NcEmptyContent from '@nextcloud/vue/components/NcEmptyContent'
68+
import NcIconSvgWrapper from '@nextcloud/vue/components/NcIconSvgWrapper'
69+
import NcNoteCard from '@nextcloud/vue/components/NcNoteCard'
4670
import svgCloudUpload from '@mdi/svg/svg/cloud-upload.svg?raw'
4771
4872
defineProps<{
4973
foldername: string
5074
}>()
5175
5276
const disclaimer = loadState<string>('files_sharing', 'disclaimer', '')
77+
const shareLabel = loadState<string>('files_sharing', 'label', '')
78+
const shareNote = loadState<string>('files_sharing', 'note', '')
79+
80+
const name = shareLabel || t('files_sharing', 'File drop')
81+
5382
const showDialog = ref(false)
5483
const uploadDestination = getUploader().destination
55-
</script>
5684
57-
<style scoped>
58-
:deep(.terms-of-service-dialog) {
59-
min-height: min(100px, 20vh);
85+
getUploader()
86+
.addNotifier((upload) => {
87+
if (upload.status === UploadStatus.FINISHED && upload.file.name) {
88+
uploads.add(upload.file.name)
89+
console.warn('DONE')
90+
} else {
91+
console.warn(upload)
92+
}
93+
})
94+
95+
/**
96+
* Get the previous uploads as sorted list
97+
*/
98+
function getSortedUploads() {
99+
return [...uploads].sort((a, b) => a.localeCompare(b))
60100
}
61-
/* TODO fix in library */
62-
.file-drop-empty-content :deep(.empty-content__action) {
63-
display: flex;
64-
gap: var(--default-grid-baseline);
101+
</script>
102+
103+
<style scoped lang="scss">
104+
.file-drop-empty-content {
105+
margin: auto;
106+
max-width: max(50vw, 300px);
107+
108+
.file-drop-empty-content__note-card {
109+
width: fit-content;
110+
margin-inline: auto;
111+
}
112+
113+
#file-drop-empty-content__heading {
114+
margin-block: 0 10px;
115+
font-weight: bold;
116+
font-size: 20px;
117+
}
118+
119+
.file-drop-empty-content__list {
120+
list-style: inside;
121+
max-height: min(350px, 33vh);
122+
overflow-y: scroll;
123+
padding-inline-end: calc(2 * var(--default-grid-baseline));
124+
}
125+
126+
:deep(.terms-of-service-dialog) {
127+
min-height: min(100px, 20vh);
128+
}
129+
130+
/* TODO fix in library */
131+
:deep(.empty-content__action) {
132+
display: flex;
133+
gap: var(--default-grid-baseline);
134+
}
65135
}
66136
</style>

0 commit comments

Comments
 (0)