feat: add drag-and-drop document upload to Files page

[yazeed1425]

Resolves: #7926

📝 Summary

Adds drag-and-drop as an additional input method for the existing upload flow on the LibreSign Files page. Dropped files are routed through the same validation, envelope, and upload logic as the existing "Upload" button by extracting a shared RequestPicker.handleFilesSelected() entry point, so there are no separate rules for drag-and-drop vs. click-to-upload.

• FilesList.vue gains dragenter/dragover/dragleave/drop handlers on the page content area, with a visual drop-target overlay, gated on the existing canRequestSign permission.
• RequestPicker.vue's max-file-uploads and envelope-name-dialog logic is reused as-is; a new guard shows an error when multiple files are dropped while envelopes are disabled (previously unreachable via the single-select file picker, but reachable via drag-and-drop).

🧪 How to test

1. Open the LibreSign Files page as a user who can request signatures.
2. Drag a PDF from your file explorer over the file list — a dashed-border "Drop files here to upload" overlay should appear.
3. Drop it — it uploads and appears in the list, same as using the "Upload" button.
4. With envelopes enabled, drop 2+ files — the envelope-naming dialog opens, same as the existing multi-select flow.
5. With envelopes disabled, drop 2+ files — you get an "Only one file can be uploaded at a time." error and nothing uploads.
6. Confirm the existing "+ Request" → "Upload" click flow still works unchanged.

Automated coverage: src/tests/components/Request/RequestPicker.spec.ts and src/tests/views/FilesList/FilesList.spec.ts (both envelope-enabled and envelope-disabled scenarios).

Note for reviewers: this was verified visually against the real Vue component tree using a temporary local harness with a mocked backend, in addition to the automated test suite. It has not yet been exercised against a live Nextcloud instance — please do a real end-to-end pass before merging.

🎨 UI / Front‑end changes

• Added drag-and-drop upload support to the Files page, reusing the existing upload button's validation/envelope/upload logic.

• Screenshots before/after (add images or links)

• 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
  (Existing keyboard flows are untouched; the drop overlay is aria-hidden + pointer-events: none so it can't trap focus or interfere with tab order — but no actual screen-reader pass was done.)

• Design review approved – optional, link to feedback if available

• Documentation updated (if applicable) – docs repository

✅ 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

[vitormattos]

@yazeed1425 you need to fix the DCO issue:
https://github.com/LibreSign/libresign/pull/7928/checks?check_run_id=88115383584

[vitormattos]

@yazeed1425 could you also provide a screenshot or a short screen recording?

[yazeed1425]

[yazeed1425]

i fixed the DCO issue and provieded screenshot

[vitormattos]

@yazeed1425 I was able to reproduce it locally and it worked fine, but it seems to have style issues in your environment. Could you share which browser you’re using, or how you set up your developer environment?

[codecov-commenter]

⚠️ Please install the to ensure uploads and comments are reliably processed by Codecov.

Codecov Report

❌ Patch coverage is 75.00000% with 16 lines in your changes missing coverage. Please review.

Files with missing lines	Patch %	Lines
src/views/FilesList/FilesList.vue	70.00%	10 Missing and 5 partials ⚠️
src/components/Request/RequestPicker.vue	92.85%	1 Missing ⚠️
❗ Your organization needs to install the Codecov GitHub app to enable full functionality.

Files with missing lines	Coverage Δ
src/components/Request/RequestPicker.vue	72.54% <92.85%> (+6.39%)	⬆️
src/views/FilesList/FilesList.vue	74.11% <70.00%> (-1.36%)	⬇️

... and 171 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.

[yazeed1425]

The screenshots I attached were taken from a temporary local test harness I built to preview the drag-and-drop behavior without a full Nextcloud setup. While testing, I added some cosmetic-only CSS tweaks to that harness (bigger button, custom hover/click colors) just to make it easier to interact with

[vitormattos]

/backport to stable34

[vitormattos]

/backport to stable33

[vitormattos]

/backport to stable32

[yazeed1425]

Thanks for the review and for merging this! Glad to contribute.

[vitormattos]

Thanks again for your contribution! We are preparing more good first issues and would be happy to have you contribute again.

What kind of tasks or technologies would you be interested in working with? Also, how did you find this issue, and how was your experience setting up and testing LibreSign?

[yazeed1425]

Thank you! I really enjoyed working on this PR.

I'm currently focusing on Frontend development using React and TypeScript, so I'd love to take on tasks related to UI features or user experience improvements.

I found this issue while searching for open-source opportunities on GitHub. Setting up LibreSign and testing it was a smooth experience overall.

Looking forward to the new issues!