Skip to content

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

Open
yazeed1425 wants to merge 1 commit into
LibreSign:mainfrom
yazeed1425:feat/7926-drag-and-drop-upload-files-page
Open

feat: add drag-and-drop document upload to Files page#7928
yazeed1425 wants to merge 1 commit into
LibreSign:mainfrom
yazeed1425:feat/7926-drag-and-drop-upload-files-page

Conversation

@yazeed1425

Copy link
Copy Markdown

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

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).

Closes LibreSign#7926

Co-Authored-By: Claude Sonnet 5 <noreply@anthropic.com>
@github-project-automation github-project-automation Bot moved this to 0. Needs triage in Roadmap Jul 18, 2026
@vitormattos
vitormattos requested a review from YvesCesar July 20, 2026 13:57
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

Status: 0. Needs triage

Development

Successfully merging this pull request may close these issues.

[FEATURE]: Add drag-and-drop document upload to the Files page

2 participants