Merge pull request #6674 from nextcloud/backport/6671/stable27

[stable27] fix: Properly show attachment extension

.github/workflows/appbuild.yml

@@ -37,7 +37,7 @@ jobs:
         uname -a
         RUST_BACKTRACE=1 krankerl --version
         RUST_BACKTRACE=1 krankerl package
-    - uses: actions/upload-artifact@v3
+    - uses: actions/upload-artifact@v4
       with:
         name: Deck app tarball
         path: build/artifacts/deck.tar.gz

.github/workflows/cypress.yml

@@ -108,7 +108,7 @@ jobs:
           npm_package_name: ${{ env.APP_NAME }}
 
       - name: Upload test failure screenshots
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: Upload screenshots
@@ -116,7 +116,7 @@ jobs:
           retention-days: 5
 
       - name: Upload nextcloud logs
-        uses: actions/upload-artifact@v3
+        uses: actions/upload-artifact@v4
         if: failure()
         with:
           name: Upload nextcloud log

cypress/e2e/cardFeatures.js

@@ -114,7 +114,8 @@ describe('Card', function() {
 			cy.get('.file-picker__main [data-filename="welcome.txt"]').should('be.visible')
 				.click()
 			cy.get('.dialog__actions button.button-vue--vue-primary').click()
-			cy.get('.attachment-list .basename').contains('welcome.txt')
+			cy.get('.attachment-list .filename').contains('welcome')
+			cy.get('.attachment-list .filename .extension').contains('txt')
 		})
 
 		it('Shows the modal with the editor', () => {

src/components/card/AttachmentList.vue

@@ -41,7 +41,8 @@
 				<div class="details">
 					<a>
 						<div class="filename">
-							<span class="basename">{{ attachment.name }}</span>
+							<span>{{ attachmentBasename(attachment) }}</span>
+							<span class="extension">.{{ attachmentExtension(attachment) }}</span>
 						</div>
 						<progress :value="attachment.progress" max="100" />
 					</a>
@@ -58,7 +59,8 @@
 				<div class="details">
 					<a :href="internalLink(attachment)" @click.prevent="showViewer(attachment)">
 						<div class="filename">
-							<span class="basename">{{ attachment.data }}</span>
+							<span>{{ attachmentBasename(attachment) }}</span>
+							<span class="extension">.{{ attachmentExtension(attachment) }}</span>
 						</div>
 						<div v-if="attachment.deletedAt === 0">
 							<span class="filesize">{{ formattedFileSize(attachment.extendedData.filesize) }}</span>
@@ -200,6 +202,14 @@ export default {
 				return t('deck', 'Drop your files to upload')
 			}
 		},
+		attachmentBasename() {
+			return (attachment) => attachment?.extendedData?.info.filename
+				?? (attachment?.name ?? attachment.data).replace(/\.[^/.]+$/, '')
+		},
+		attachmentExtension() {
+			return (attachment) => attachment?.extendedData?.info?.extension
+				?? (attachment?.name ?? attachment.data).split('.').pop()
+		},
 	},
 	watch: {
 		cardId: {

src/components/card/Description.vue

@@ -255,15 +255,18 @@ export default {
 		},
 		addAttachment(attachment) {
 			const asImage = (attachment.type === 'file' && attachment.extendedData.hasPreview) || attachment.extendedData.mimetype.includes('image')
+			// We need to strip those as text does not support rtl yet, so we cannot insert them separately
+			const stripRTLO = (text) => text.replaceAll('\u202e', '')
+			const fileName = stripRTLO(attachment.extendedData.info.filename) + '.' + stripRTLO(attachment.extendedData.info.extension)
 			if (this.editor) {
 				this.editor.insertAtCursor(
 					asImage
 						? `<a href="${this.attachmentPreview(attachment)}"><img src="${this.attachmentPreview(attachment)}" alt="${attachment.data}" /></a>`
-						: `<a href="${this.attachmentPreview(attachment)}">${attachment.data}</a>`,
+						: `<a href="${this.attachmentPreview(attachment)}">${fileName}</a>`,
 				)
 				return
 			} else {
-				const attachmentString = (asImage ? '!' : '') + '[📎 ' + attachment.data + '](' + this.attachmentPreview(attachment) + ')'
+				const attachmentString = (asImage ? '!' : '') + '[📎 ' + fileName + '](' + this.attachmentPreview(attachment) + ')'
 				const descString = this.$refs.markdownEditor.easymde.value()
 				const newContent = descString + '\n' + attachmentString
 				this.$refs.markdownEditor.easymde.value(newContent)