feat: allow to specify forbidden characters

cypress/components/UploadPicker.cy.ts

@@ -2,8 +2,8 @@
 // dist file might not be built when running eslint only
 // eslint-disable-next-line import/no-unresolved,n/no-missing-import
 import { Folder, Permission, addNewFileMenuEntry, type Entry } from '@nextcloud/files'
-import { UploadPicker, getUploader } from '../../lib/index.ts'
 import { generateRemoteUrl } from '@nextcloud/router'
+import { UploadPicker, getUploader } from '../../lib/index.ts'
 
 describe('UploadPicker rendering', () => {
 	afterEach(() => {
@@ -25,7 +25,7 @@ describe('UploadPicker rendering', () => {
 		}
 		cy.mount(UploadPicker, { propsData })
 		cy.get('[data-cy-upload-picker]').should('be.visible')
-		cy.get('[data-cy-upload-picker]').should('have.text', ' New ')
+		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New')
 		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').should('exist')
 	})
 
@@ -54,7 +54,7 @@ describe('UploadPicker valid uploads', () => {
 		cy.mount(UploadPicker, { propsData }).as('uploadPicker')
 
 		// Label is displayed before upload
-		cy.get('[data-cy-upload-picker]').should('have.text', ' New ')
+		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New')
 
 		// Check and init aliases
 		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
@@ -99,8 +99,79 @@ describe('UploadPicker valid uploads', () => {
 				.should('not.be.visible')
 
 			// Label is displayed again after upload
-			cy.get('[data-cy-upload-picker] button').should('have.text', ' New ')
+			cy.get('[data-cy-upload-picker] button').shouldHaveTrimmedText('New')
+		})
+	})
+})
+
+describe('UploadPicker invalid uploads', () => {
+
+	afterEach(() => {
+		// Make sure we clear the body
+		cy.window().then((win) => {
+			win.document.body.innerHTML = '<div data-cy-root></div>'
+		})
+	})
+
+	it('Fails a file if forbidden character', () => {
+		// Make sure we reset the destination
+		// so other tests do not interfere
+		const propsData = {
+			destination: new Folder({
+				id: 56,
+				owner: 'user',
+				source: generateRemoteUrl('dav/files/user'),
+				permissions: Permission.ALL,
+				root: '/files/user',
+			}),
+			forbiddenCharacters: ['$', '#', '~', '&'],
+		}
+
+		// Mount picker
+		cy.mount(UploadPicker, { propsData }).as('uploadPicker')
+
+		// Label is displayed before upload
+		cy.get('[data-cy-upload-picker]').shouldHaveTrimmedText('New')
+
+		// Check and init aliases
+		cy.get('[data-cy-upload-picker] [data-cy-upload-picker-input]').as('input').should('exist')
+		cy.get('[data-cy-upload-picker] .upload-picker__progress').as('progress').should('exist')
+
+		// Intercept single upload
+		cy.intercept('PUT', '/remote.php/dav/files/*/*', (req) => {
+			req.reply({
+				statusCode: 201,
+				delay: 2000,
+			})
+		}).as('upload')
+
+		// Upload 2 files
+		cy.get('@input').attachFile({
+			// Fake file of 5 MB
+			fileContent: new Blob([new ArrayBuffer(2 * 1024 * 1024)]),
+			fileName: 'invalid-image$.jpg',
+			mimeType: 'image/jpeg',
+			encoding: 'utf8',
+			lastModified: new Date().getTime(),
 		})
+
+		cy.get('@input').attachFile({
+			// Fake file of 5 MB
+			fileContent: new Blob([new ArrayBuffer(2 * 1024 * 1024)]),
+			fileName: 'valid-image.jpg',
+			mimeType: 'image/jpeg',
+			encoding: 'utf8',
+			lastModified: new Date().getTime(),
+		})
+
+		cy.get('[data-cy-upload-picker] .upload-picker__progress')
+			.as('progress')
+			.should('not.be.visible')
+
+		cy.wait('@upload')
+		// Should not have been called more than once as the first file is invalid
+		cy.get('@upload.all').should('have.length', 1)
+		cy.get('body').should('contain', '"$" is not allowed inside a file name.')
 	})
 })
 

cypress/cypress.d.ts

@@ -0,0 +1,16 @@
+import { mount } from 'cypress/vue'
+
+// Augment the Cypress namespace to include type definitions for
+// your custom command.
+// Alternatively, can be defined in cypress/support/component.d.ts
+// with a <reference path="./component" /> at the top of your spec.
+declare global {
+	namespace Cypress {
+		interface Chainable {
+			mount: typeof mount
+			shouldHaveTrimmedText: (
+				text: string
+			) => Chainable<JQuery<HTMLElement>>
+		}
+	}
+}

cypress/support/commands.ts

@@ -9,3 +9,12 @@
 // https://on.cypress.io/custom-commands
 // ***********************************************
 import 'cypress-file-upload'
+
+Cypress.Commands.add(
+	'shouldHaveTrimmedText',
+	{ prevSubject: true },
+	(subject: JQuery<HTMLElement>, text: string) => {
+		cy.wrap(subject)
+			.should(element => expect(element.text().trim()).to.equal(text))
+	},
+)

cypress/tsconfig.json

@@ -3,7 +3,10 @@
 		"@tsconfig/cypress/tsconfig.json",
 		"../tsconfig.json"
 	],
-	"include": ["./**/*.ts"],
+	"include": [
+		"./**/*.ts", 
+		"./cypress.d.ts"
+	],
 	"compilerOptions": {
 		"types": ["cypress"],
 		"rootDir": "..",

lib/components/ConflictPicker.vue

@@ -25,7 +25,9 @@
 			@submit.prevent.stop="onSubmit">
 			<!-- Select all checkboxes -->
 			<fieldset class="conflict-picker__all" data-cy-conflict-picker-fieldset="all">
-				<legend class="hidden-visually">{{ t('Select all checkboxes') }}</legend>
+				<legend class="hidden-visually">
+					{{ t('Select all checkboxes') }}
+				</legend>
 				<NcCheckboxRadioSwitch v-bind="selectAllNewBind"
 					data-cy-conflict-picker-input-incoming="all"
 					@update:checked="onSelectAllNew">

lib/components/UploadPicker.vue

@@ -36,7 +36,7 @@
 				:close-after-click="true"
 				class="upload-picker__menu-entry"
 				@click="entry.handler(destination, content)">
-				<template #icon v-if="entry.iconSvgInline">
+				<template v-if="entry.iconSvgInline" #icon>
 					<NcIconSvgWrapper :svg="entry.iconSvgInline" />
 				</template>
 				{{ entry.displayName }}
@@ -50,7 +50,9 @@
 				:error="hasFailure"
 				:value="progress"
 				size="medium" />
-			<p :id="progressTimeId">{{ timeLeft }}</p>
+			<p :id="progressTimeId">
+				{{ timeLeft }}
+			</p>
 		</div>
 
 		<!-- Cancel upload button -->
@@ -140,6 +142,10 @@ export default Vue.extend({
 			type: Array as PropType<Node[]>,
 			default: () => [],
 		},
+		forbiddenCharacters: {
+			type: Array as PropType<string[]>,
+			default: () => [],
+		},
 	},
 
 	data() {
@@ -269,10 +275,17 @@ export default Vue.extend({
 			}
 
 			files.forEach(file => {
-				this.uploadManager.upload(file.name, file)
-					.catch(() => {
-						// Ignore errors, they are handled by the upload manager
-					})
+				const forbiddenCharacters = (this.forbiddenCharacters || []) as string[]
+				const forbiddenChar = forbiddenCharacters.find(char => file.name.includes(char))
+
+				if (forbiddenChar) {
+					showError(t(`"${forbiddenChar}" is not allowed inside a file name.`))
+				} else {
+					this.uploadManager.upload(file.name, file)
+						.catch(() => {
+							// Ignore errors, they are handled by the upload manager
+						})
+				}
 			})
 			this.$refs.form.reset()
 		},