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

The LibreSign Files page currently allows users to upload documents by clicking the upload button and selecting files from their device.

A common user expectation is to be able to drag files directly from the operating system and drop them onto the file listing page. Supporting this interaction would make document uploads faster and bring the page closer to the behavior users expect from modern file management interfaces.

This issue proposes adding drag-and-drop support to the existing upload flow on the LibreSign Files page.

How to find the page

1. Sign in to Nextcloud.
2. Open the LibreSign app.
3. Navigate to the page that lists LibreSign files.
4. Use the existing upload button to upload a document from the device.

Expected behavior

Users should be able to:

1. Drag one or more supported documents from their device.
2. Drop them onto the files listing area or its designated upload area.
3. Have the files processed through the same upload flow already used by the existing upload button.
4. See the uploaded documents in the file listing after the upload completes.

The existing click-to-upload functionality must continue to work.

Envelope behavior

The drag-and-drop implementation must respect the existing envelope configuration and upload restrictions:

• When the envelope feature is enabled, users may upload multiple documents according to the existing rules.
• When the envelope feature is disabled, only one document may be uploaded.
• If multiple files are dropped while envelopes are disabled, the interface must handle the situation consistently with the existing upload button.
• File type, file count, size and other restrictions must remain identical to those applied by the current upload flow.

The implementation must reuse the existing validation logic and must not create different rules for files selected through drag-and-drop.

User experience

The page should provide clear visual feedback when files are dragged over a valid drop area.

The interaction should:

• Make the valid drop area easy to identify.
• Avoid interfering with normal navigation or file-list interactions.
• Restore the normal interface when files leave the drop area.
• Preserve the existing upload button.
• Preserve keyboard accessibility.
• Use existing progress, success and error feedback whenever possible.
• Prevent the browser from opening the dropped document directly.

The drop target should be limited to an intentional area of the LibreSign interface so that dropping a file elsewhere does not cause unexpected behavior.

Acceptance criteria

• Users can drag and drop documents onto the designated area of the LibreSign Files page.
• The page provides visible feedback while files are dragged over a valid drop area.
• Dropped files use the same upload and validation flow as files selected through the existing upload button.
• Successfully uploaded documents appear in the file listing.
• When envelopes are enabled, multiple documents can be dropped according to the existing rules.
• When envelopes are disabled, only one document can be accepted.
• Dropping multiple files while envelopes are disabled is handled consistently with the existing file picker flow.
• Existing file type, size and upload restrictions are preserved.
• Existing progress and error feedback is reused whenever possible.
• The browser does not navigate away from LibreSign or open the dropped file.
• Existing file-list interactions continue to work.
• The existing click-to-upload functionality continues to work.
• Keyboard accessibility is not affected.
• Automated tests cover the drag-and-drop behavior.
• Automated tests cover both envelope-enabled and envelope-disabled scenarios.
• The implementation follows the existing LibreSign frontend patterns and coding standards.

Implementation notes

Drag-and-drop should be treated only as an additional input method for the existing upload feature.

The implementation should pass the dropped files to the same handlers used by the upload button, including:

• File validation.
• Envelope-related file-count validation.
• Upload progress.
• Error handling.
• Refreshing or updating the file listing.

Please avoid duplicating upload or envelope validation logic.

Good first issue

This issue should be a good opportunity for new contributors to become familiar with the LibreSign frontend, file listing and upload flow.

Although the change is expected to be mostly frontend-focused, contributors should pay special attention to existing upload rules and automated test coverage.

Additional context

• If you have questions, feel free to ask in this issue.
• Give a ⭐️ star to this repository if you find LibreSign useful and would like to support the project.