Add PdfFileDropZone for interactive PDF uploads

Replaced static upload message in `CreateEnvelopeWizardPopup.razor` with a new `PdfFileDropZone` component to enhance user experience. The component supports drag-and-drop functionality, file selection, and dynamic states (e.g., disabled, drag-active). Introduced `PdfFileDropZone.razor` with customizable parameters such as `Disabled`, `HasDocument`, `UploadText`, and `DragDropHintText`. Added event handling for drag-and-drop interactions and file selection. Updated `sender-page.css` to include styles for the new component, ensuring seamless integration with the existing layout. Adjusted styles for hover effects, drag-active state, and disabled state. These changes improve usability and make PDF uploads more intuitive.
2026-10-06 10:31:43 +02:00
parent 60241c9c6d
commit 47f48ba12a
3 changed files with 173 additions and 3 deletions
--- a/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/PdfFileDropZone.razor
+++ b/EnvelopeGenerator.Server/EnvelopeGenerator.Server.Client/Components/Sender/PdfFileDropZone.razor
@@ -0,0 +1,104 @@
+@using Microsoft.AspNetCore.Components.Forms
+
+<div class="sender-pdf-dropzone @DropZoneClass">
+    <div class="sender-pdf-dropzone__content">
+        <div class="sender-pdf-dropzone__title">@CurrentActionText</div>
+        @if (!string.IsNullOrWhiteSpace(DragDropHintText))
+        {
+            <div class="sender-pdf-dropzone__hint">@DragDropHintText</div>
+        }
+    </div>
+
+    <InputFile OnChange="OnFileSelectedAsync"
+               accept="@Accept"
+               disabled="@Disabled"
+               @ondragenter="OnDragEnter"
+               @ondragleave="OnDragLeave"
+               @ondragover="OnDragOver"
+               @ondrop="OnDrop"
+               class="sender-pdf-dropzone__input" />
+</div>
+
+@code {
+    [Parameter]
+    public bool Disabled { get; set; }
+
+    [Parameter]
+    public bool HasDocument { get; set; }
+
+    [Parameter]
+    public string Accept { get; set; } = ".pdf";
+
+    [Parameter]
+    public string UploadText { get; set; } = "PDF hochladen";
+
+    [Parameter]
+    public string ReplaceText { get; set; } = "PDF ersetzen";
+
+    [Parameter]
+    public string DragDropHintText { get; set; } = "Datei hierhin ziehen oder klicken";
+
+    [Parameter]
+    public EventCallback<InputFileChangeEventArgs> FileSelected { get; set; }
+
+    private int _dragDepth;
+    private bool _isDragActive;
+
+    private string CurrentActionText => HasDocument ? ReplaceText : UploadText;
+
+    private string DropZoneClass
+    {
+        get
+        {
+            if (Disabled)
+                return "sender-pdf-dropzone--disabled";
+
+            return _isDragActive ? "sender-pdf-dropzone--drag-active" : string.Empty;
+        }
+    }
+
+    private void OnDragEnter(DragEventArgs _)
+    {
+        if (Disabled)
+            return;
+
+        _dragDepth++;
+        _isDragActive = true;
+    }
+
+    private void OnDragLeave(DragEventArgs _)
+    {
+        if (Disabled)
+            return;
+
+        _dragDepth = Math.Max(0, _dragDepth - 1);
+        if (_dragDepth == 0)
+            _isDragActive = false;
+    }
+
+    private void OnDragOver(DragEventArgs _)
+    {
+        if (Disabled)
+            return;
+
+        _isDragActive = true;
+    }
+
+    private void OnDrop(DragEventArgs _)
+    {
+        _dragDepth = 0;
+        _isDragActive = false;
+    }
+
+    private async Task OnFileSelectedAsync(InputFileChangeEventArgs args)
+    {
+        _dragDepth = 0;
+        _isDragActive = false;
+
+        if (Disabled)
+            return;
+
+        if (FileSelected.HasDelegate)
+            await FileSelected.InvokeAsync(args);
+    }
+}