feat(validation): support drag-and-drop PDF upload on the Validation page

src/tests/views/Validation.spec.ts

@@ -24,7 +24,12 @@ type ValidationVm = {
 	isAsyncSigning: boolean
 	shouldFireAsyncConfetti: boolean
 	isActiveView: boolean
+	isDraggingOver: boolean
 	EXPIRATION_WARNING_DAYS: number
+	isPdfFile: (file: File) => boolean
+	handleDragOver: () => void
+	handleDragLeave: () => void
+	handleFileDrop: (event: Partial<DragEvent>) => Promise<void>
 	isAfterSigned: boolean
 	isEnvelope: boolean
 	validationComponent: unknown
@@ -63,6 +68,7 @@ vi.mock('@nextcloud/axios', () => ({
 	default: {
 		get: vi.fn(),
 		post: vi.fn(),
+		postForm: vi.fn(),
 		put: vi.fn(),
 		delete: vi.fn(),
 	},
@@ -1077,6 +1083,71 @@ describe('Validation.vue - Business Logic', () => {
 		})
 	})
 
+	describe('drag-and-drop upload on the Validation page', () => {
+		const buildDropEvent = (files: File[]): Partial<DragEvent> => ({
+			dataTransfer: { files } as unknown as DataTransfer,
+		})
+
+		it('accepts a file whose mime type is application/pdf', () => {
+			const file = new File(['%PDF-1.7'], 'contract.pdf', { type: 'application/pdf' })
+			expect(wrapper.vm.isPdfFile(file)).toBe(true)
+		})
+
+		it('accepts a .pdf file even when the browser reports no mime type', () => {
+			const file = new File(['%PDF-1.7'], 'contract.pdf', { type: '' })
+			expect(wrapper.vm.isPdfFile(file)).toBe(true)
+		})
+
+		it('rejects a non-PDF file', () => {
+			const file = new File(['plain'], 'notes.txt', { type: 'text/plain' })
+			expect(wrapper.vm.isPdfFile(file)).toBe(false)
+		})
+
+		it('marks the dropzone as active while a file is dragged over it', () => {
+			wrapper.vm.handleDragOver()
+			expect(wrapper.vm.isDraggingOver).toBe(true)
+		})
+
+		it('does not activate the dropzone while an upload is already in progress', async () => {
+			await setVmState({ loading: true })
+			wrapper.vm.handleDragOver()
+			expect(wrapper.vm.isDraggingOver).toBe(false)
+		})
+
+		it('clears the active state when the drag leaves the dropzone', async () => {
+			await setVmState({ isDraggingOver: true })
+			wrapper.vm.handleDragLeave()
+			expect(wrapper.vm.isDraggingOver).toBe(false)
+		})
+
+		it('validates a dropped PDF through the same endpoint as the upload button', async () => {
+			vi.mocked(axios.postForm).mockResolvedValueOnce({ data: { ocs: { data: {} } } })
+			const file = new File(['%PDF-1.7'], 'contract.pdf', { type: 'application/pdf' })
+
+			await wrapper.vm.handleFileDrop(buildDropEvent([file]))
+
+			expect(axios.postForm).toHaveBeenCalledOnce()
+			const formData = vi.mocked(axios.postForm).mock.calls[0][1] as FormData
+			expect(formData.get('file')).toBe(file)
+			expect(wrapper.vm.isDraggingOver).toBe(false)
+			expect(wrapper.vm.loading).toBe(false)
+		})
+
+		it('rejects a dropped non-PDF file without calling the validate endpoint', async () => {
+			const file = new File(['plain'], 'notes.txt', { type: 'text/plain' })
+
+			await wrapper.vm.handleFileDrop(buildDropEvent([file]))
+
+			expect(axios.postForm).not.toHaveBeenCalled()
+			expect(wrapper.vm.validationErrorMessage).toBe('Please upload a PDF file')
+		})
+
+		it('ignores a drop that carries no file', async () => {
+			await wrapper.vm.handleFileDrop(buildDropEvent([]))
+			expect(axios.postForm).not.toHaveBeenCalled()
+		})
+	})
+
 	describe('status contract guards', () => {
 		const createLoadedValidationDocument = (patch: Record<string, unknown> = {}) => ({
 			id: 100,

src/views/Validation.vue

@@ -24,23 +24,34 @@
 						{{ validationErrorMessage }}
 					</NcNoteCard>
 					<!-- TRANSLATORS: Same meaning as the previous string: technical process of checking cryptographic integrity of signatures, NOT an approval. -->
-					<NcActions :menu-name="t('libresign', 'Validate signature')" :inline="3" :force-name="true">
-						<NcActionButton :wide="true" :disabled="loading" @click="openUuidDialog()">
-							<!-- TRANSLATORS: "UUID" is a unique technical identifier for a document (a code like '550e8400-e29b-41d4-a716-446655440000'). Keep "UUID" untranslated. -->
-							{{ t('libresign', 'From UUID') }}
-							<template #icon>
-								<NcLoadingIcon v-if="loading" :size="20" />
-								<NcIconSvgWrapper v-else :path="mdiKey" />
-							</template>
-						</NcActionButton>
-						<NcActionButton :wide="true" :disabled="loading" @click="uploadFile">
-							{{ t('libresign', 'Upload') }}
-							<template #icon>
-								<NcLoadingIcon v-if="loading" :size="20" />
-								<NcIconSvgWrapper v-else :path="mdiUpload" />
-							</template>
-						</NcActionButton>
-					</NcActions>
+					<div class="upload-dropzone"
+						:class="{ 'upload-dropzone--dragover': isDraggingOver }"
+						@dragover.prevent="handleDragOver"
+						@dragleave.prevent="handleDragLeave"
+						@drop.prevent="handleFileDrop">
+						<p class="upload-dropzone__hint">
+							<!-- TRANSLATORS Hint shown inside the drag-and-drop area on the signature validation page. It tells the user they can either drop a PDF file here or use the "From UUID"/"Upload" buttons below. -->
+							{{ t('libresign', 'Drag and drop a PDF here, or use the buttons below.') }}
+						</p>
+						<NcActions :menu-name="t('libresign', 'Validate signature')" :inline="3" :force-name="true">
+							<NcActionButton :wide="true" :disabled="loading" @click="openUuidDialog()">
+								<!-- TRANSLATORS "UUID" is a unique technical identifier for a document (a code like '550e8400-e29b-41d4-a716-446655440000'). Keep "UUID" untranslated. -->
+								{{ t('libresign', 'From UUID') }}
+								<template #icon>
+									<NcLoadingIcon v-if="loading" :size="20" />
+									<NcIconSvgWrapper v-else :path="mdiKey" />
+								</template>
+							</NcActionButton>
+							<NcActionButton :wide="true" :disabled="loading" @click="uploadFile">
+								<!-- TRANSLATORS Label of the button that lets the user pick a PDF file from their device to validate its signatures. -->
+								{{ t('libresign', 'Upload') }}
+								<template #icon>
+									<NcLoadingIcon v-if="loading" :size="20" />
+									<NcIconSvgWrapper v-else :path="mdiUpload" />
+								</template>
+							</NcActionButton>
+						</NcActions>
+					</div>
 					<!-- TRANSLATORS: Same meaning as the first string in this section: technical process of checking cryptographic integrity of signatures, NOT an approval. -->
 					<NcDialog v-if="getUUID" :name="t('libresign', 'Validate signature')" is-form
 						@closing="getUUID = false">
@@ -302,6 +313,7 @@ const legalInformation = computed(() => {
 })
 const clickedValidate = ref(false)
 const getUUID = ref(false)
+const isDraggingOver = ref(false)
 const validationStatusOpenState = ref<ToggleOpenState>({})
 const extensionsOpenState = ref<ToggleOpenState>({})
 const tsaOpenState = ref<ToggleOpenState>({})
@@ -411,6 +423,42 @@ async function uploadFile() {
 	input.click()
 }
 
+function isPdfFile(file: File) {
+	return file.type === 'application/pdf' || /\.pdf$/i.test(file.name)
+}
+
+function handleDragOver() {
+	if (loading.value) {
+		return
+	}
+	isDraggingOver.value = true
+}
+
+function handleDragLeave() {
+	isDraggingOver.value = false
+}
+
+async function handleFileDrop(event: DragEvent) {
+	isDraggingOver.value = false
+	if (loading.value) {
+		return
+	}
+
+	const file = event.dataTransfer?.files?.[0]
+	if (!file) {
+		return
+	}
+
+	if (!isPdfFile(file)) {
+		setValidationError(t('libresign', 'Please upload a PDF file'))
+		return
+	}
+
+	loading.value = true
+	await upload(file)
+	loading.value = false
+}
+
 function dateFromSqlAnsi(date: string) {
 	return Moment(Date.parse(date)).format('LL LTS')
 }
@@ -923,6 +971,7 @@ defineExpose({
 	legalInformation,
 	clickedValidate,
 	getUUID,
+	isDraggingOver,
 	EXPIRATION_WARNING_DAYS,
 	validationStatusOpenState,
 	extensionsOpenState,
@@ -947,6 +996,10 @@ defineExpose({
 	crlStatusMap,
 	upload,
 	uploadFile,
+	isPdfFile,
+	handleDragOver,
+	handleDragLeave,
+	handleFileDrop,
 	dateFromSqlAnsi,
 	getSignerStatus,
 	validate,
@@ -1059,6 +1112,23 @@ defineExpose({
 			float: inline-end;
 			align-self: flex-end;
 		}
+		.upload-dropzone {
+			border: 2px dashed var(--color-border-dark);
+			border-radius: var(--border-radius-large);
+			padding: 20px;
+			transition: border-color 0.2s ease, background-color 0.2s ease;
+
+			&--dragover {
+				border-color: var(--color-primary-element);
+				background-color: var(--color-primary-element-light);
+			}
+
+			&__hint {
+				margin: 0 0 12px;
+				text-align: center;
+				color: var(--color-text-maxcontrast);
+			}
+		}
 		.infor-container {
 			width: 100%;
 			margin: auto 0;