Skip to content

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

Open
SAY-5 wants to merge 2 commits into
LibreSign:mainfrom
SAY-5:feat/validation-drag-drop-upload
Open

feat(validation): support drag-and-drop PDF upload on the Validation page#7924
SAY-5 wants to merge 2 commits into
LibreSign:mainfrom
SAY-5:feat/validation-drag-drop-upload

Conversation

@SAY-5

@SAY-5 SAY-5 commented Jul 18, 2026

Copy link
Copy Markdown

Resolves: #7923

📝 Summary

The Validation page only accepted a PDF through the Upload button. Users often expect the upload area to also accept a dragged file, and during testing a dropped PDF did nothing. This adds drag-and-drop over the upload area, reusing the existing validate flow. The Upload and From UUID buttons keep working as before.

🧪 How to test

  1. Open the LibreSign app and select Validation from the left sidebar.
  2. Drag a PDF from your device over the upload area and drop it. The area highlights while the file is dragged over it.
  3. Confirm the document goes through the same validation flow as clicking Upload and selecting the same file.
  4. Drop a non-PDF file and confirm it is rejected with an error, matching the PDF-only upload button.
  5. Confirm the Upload and From UUID buttons still work.

🎨 UI / Front‑end changes

  • Added a drop zone around the upload actions with visible dragover feedback; dropping a PDF reuses the existing validate endpoint
  • Screenshots before/after (add images or links)
🏚️ Before 🏡 After
Screenshot before Screenshot after
  • Tested in multiple browsers (Chrome, Firefox, Safari) – optional but appreciated
  • Components, Unit (with vitest) and/or e2e (with Playwright) tests added - Required
  • Accessibility verified (contrast, keyboard navigation, screen reader friendly) – if applicable
  • Design review approved – optional, link to feedback if available
  • Documentation updated (if applicable) – docs repository

🚧 Tasks

  • ...

✅ Checklist

  • I have read and followed the contribution guide.
  • Drag-and-drop reuses the existing upload/validate path rather than adding a separate flow
  • Existing click-to-upload and keyboard access preserved

🤖 AI (if applicable)

  • The content of this PR was partially or fully generated using AI

…page

Signed-off-by: Sai Asish Y <say.apm35@gmail.com>
@github-project-automation github-project-automation Bot moved this to 0. Needs triage in Roadmap Jul 18, 2026

@vitormattos vitormattos left a comment

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Could you also provide screenshot or demo video?

Comment thread src/views/Validation.vue
</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. -->

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Suggested change
<!-- TRANSLATORS: "UUID" is a unique technical identifier for a document (a code like '550e8400-e29b-41d4-a716-446655440000'). Keep "UUID" untranslated. -->
<!-- TRANSLATORS "UUID" is a unique technical identifier for a document (a code like '550e8400-e29b-41d4-a716-446655440000'). Keep "UUID" untranslated. -->

Comment thread src/views/Validation.vue
@dragleave.prevent="handleDragLeave"
@drop.prevent="handleFileDrop">
<p class="upload-dropzone__hint">
{{ t('libresign', 'Drag and drop a PDF here, or use the buttons below.') }}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should add TRANSLATORS tips here talking about the context and what's this.

Comment thread src/views/Validation.vue
</template>
</NcActionButton>
<NcActionButton :wide="true" :disabled="loading" @click="uploadFile">
{{ t('libresign', 'Upload') }}

Copy link
Copy Markdown
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Should add TRANSLATORS tips here talking about what's this.

@github-project-automation github-project-automation Bot moved this from 0. Needs triage to 1. to do in Roadmap Jul 18, 2026
@vitormattos
vitormattos requested a review from YvesCesar July 18, 2026 16:17
@codecov-commenter

Copy link
Copy Markdown

⚠️ Please install the 'codecov app svg image' to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

❌ Patch coverage is 68.00000% with 8 lines in your changes missing coverage. Please review.

Files with missing lines Patch % Lines
src/views/Validation.vue 68.00% 7 Missing and 1 partial ⚠️
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.
Files with missing lines Coverage Δ
src/views/Validation.vue 58.91% <68.00%> (+3.53%) ⬆️

... and 172 files with indirect coverage changes

🚀 New features to boost your workflow:
  • ❄️ Test Analytics: Detect flaky tests, report on failures, and find test suite problems.
  • 📦 JS Bundle Analysis: Save yourself from yourself by tracking and limiting bundle sizes in JS merges.

@vitormattos

Copy link
Copy Markdown
Member

Congratulations on the initiative and your contribution to the project. How did you find out about LibreSign?

Signed-off-by: Sai Asish Y <say.apm35@gmail.com>
@SAY-5

SAY-5 commented Jul 18, 2026

Copy link
Copy Markdown
Author

Added the TRANSLATORS hints for the drop-zone text and the Upload button, and kept the existing UUID note as-is (matches your suggestion). Pushed in 4e06d33.

On the demo: the drag-and-drop area sits above the existing "From UUID"/"Upload" buttons on the Validation page. Dragging a PDF over it highlights the zone (upload-dropzone--dragover), and dropping runs the same validation flow as the Upload button; non-PDF drops are ignored. I'll try to attach a short screen capture, but let me know if a static screenshot of the highlighted zone is enough.

Found LibreSign while looking for a self-hosted Nextcloud-based signing app.

@SAY-5

SAY-5 commented Jul 18, 2026

Copy link
Copy Markdown
Author

Thanks for taking a look. I came across LibreSign while looking for a self-hostable, open-source document-signing option that integrates with Nextcloud, and the Validation page stood out as a place where drag-and-drop would smooth out the upload flow.

On the demo: the change lets you drop a PDF anywhere on the Validation drop zone (in addition to the existing file picker). The drop zone shows an active/hover state while a file is dragged over it, rejects non-PDF files with the same validation the picker uses, and then runs the same validation request as a picker upload. I'll add a short screen recording of the drag-and-drop flow to the PR shortly.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: 1. to do

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Add drag-and-drop PDF upload to the Validation page

3 participants