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

[vitormattos]

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

Users commonly expect file upload areas to also support dragging and dropping files. Adding this interaction would make the document upload flow faster and more intuitive, especially when users already have the document open in their file manager.

This issue proposes adding drag-and-drop support to the existing document upload area used when creating a signature request.

How to find the page

1. Sign in to Nextcloud.
2. Open the LibreSign app.
3. Start the flow to request signatures for a document.
4. Use the option 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 document upload area.
3. Have the files processed through the same upload flow already used by the existing upload button.

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

Envelope behavior

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

• When the envelope feature is enabled, users may upload multiple documents according to the existing upload 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 upload restrictions must remain consistent with the existing upload flow.

The drag-and-drop implementation should reuse the current upload validation logic rather than introducing a separate set of rules.

User experience

While supported files are being dragged over the upload area, the interface should provide clear visual feedback indicating that the files can be dropped there.

The interaction should:

• Clearly identify the available drop area.
• Restore the normal appearance when the files leave the drop area.
• Preserve the existing upload button.
• Preserve keyboard accessibility.
• Display the existing error messages when a file cannot be accepted.
• Avoid automatically creating a separate upload or signature-request flow.

Acceptance criteria

• Users can drag and drop documents onto the upload area of the signature request page.
• The upload area provides visible feedback while files are dragged over it.
• Dropped files use the same upload and validation flow as files selected through the existing upload button.
• When envelopes are enabled, multiple files can be dropped according to the existing rules.
• When envelopes are disabled, only one file 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 error messages are reused whenever possible.
• 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

This feature should reuse the existing upload handlers and validation rules. Drag-and-drop should act as an additional way to provide files to the current upload flow, not as a separate upload implementation.

Please avoid duplicating the logic that determines whether multiple documents are allowed.

Good first issue

This issue should be a good starting point for contributors interested in learning about the LibreSign frontend and document upload flow.

The change is expected to be mostly isolated to the signature request interface while reusing existing upload and validation logic.

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.

[Ayu360]

Hi, can I pick this up

[vitormattos]

Hi @Ayu360 ! Yes, go ahead.

A similar implementation is already being worked on here and may be useful as a reference:

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

By the way, how did you find LibreSign and this issue? Have you used LibreSign before?

[Ayu360]

@vitormattos thanks and to answer if I have used LibreSign before, actually no. I am just curious and was searching for issues on github and came across this one.