Add drag-and-drop PDF support to Blazor app

Implement drag-and-drop PDF loading via JS interop and DotNetObjectReference. Refactor file loading logic and UI structure for clarity. Add IAsyncDisposable for resource cleanup. Update pdfInterop.js to handle drop events and send PDF data to Blazor.

EnvelopeGenerator.ReceiverUIBlazor/Pages/Index.razor

@@ -1,66 +1,70 @@
 @page "/"
+@using Microsoft.JSInterop
 @inject IJSRuntime JS
+@implements IAsyncDisposable
 
-<h1>Sign PDF (Blazor)</h1>
+<div class="page-shell">
+    <h1>Sign PDF (Blazor)</h1>
 
-<div class="controls">
-    <InputFile OnChange="HandleFileSelected" accept="application/pdf" />
-    <button class="btn" @onclick="ShowSignaturePad" disabled="@(!HasPdf)">Add signature</button>
-    <button class="btn" @onclick="() => ShowTextOverlay(false)" disabled="@(!HasPdf)">Add text</button>
-    <button class="btn" @onclick="() => ShowTextOverlay(true)" disabled="@(!HasPdf)">Add date</button>
-    <button class="btn" @onclick="Reset" disabled="@(!HasPdf)">Reset</button>
-    <button class="btn secondary" @onclick="Download" disabled="@(!HasPdf)">Download</button>
+    <div class="controls">
+        <InputFile OnChange="HandleFileSelected" accept="application/pdf" />
+        <button class="btn" @onclick="ShowSignaturePad" disabled="@(!HasPdf)">Add signature</button>
+        <button class="btn" @onclick="() => ShowTextOverlay(false)" disabled="@(!HasPdf)">Add text</button>
+        <button class="btn" @onclick="() => ShowTextOverlay(true)" disabled="@(!HasPdf)">Add date</button>
+        <button class="btn" @onclick="Reset" disabled="@(!HasPdf)">Reset</button>
+        <button class="btn secondary" @onclick="Download" disabled="@(!HasPdf)">Download</button>
+    </div>
+
+    @if (!string.IsNullOrWhiteSpace(ErrorMessage))
+    {
+        <div class="error-banner">@ErrorMessage</div>
+    }
+
+    @if (!HasPdf)
+    {
+        <div class="drop-hint">Drop or select a PDF to start.</div>
+    }
+
+    @if (HasPdf)
+    {
+        <div class="document-shell" @ref="PdfHostRef" style="@($"width:{ViewportWidthPx}px")">
+            <canvas id="pdf-canvas" @ref="PdfCanvasRef"></canvas>
+
+            @if (ShowSignature)
+            {
+                  <div class="overlay signature" @ref="OverlayRef"
+                      style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px; width:{OverlayWidthPx}px; height:{OverlayHeightPx}px;")"
+                      @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
+                    <div class="overlay-controls">
+                        <button class="overlay-btn" @onclick="ApplySignature" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
+                        <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
+                    </div>
+                    <img src="@SignatureDataUrl" draggable="false" />
+                </div>
+            }
+
+            @if (ShowText)
+            {
+                  <div class="overlay text" @ref="OverlayRef"
+                      style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px;")"
+                      @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
+                    <div class="overlay-controls">
+                        <button class="overlay-btn" @onclick="ApplyText" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
+                        <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
+                    </div>
+                    <input class="overlay-input" @bind="TextValue" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation />
+                </div>
+            }
+        </div>
+
+        <div class="paging">
+            <button class="btn" @onclick="PrevPage" disabled="@(!CanPrev)">&lt;</button>
+            <span>Page @DisplayPage / @PageCount</span>
+            <button class="btn" @onclick="NextPage" disabled="@(!CanNext)">&gt;</button>
+        </div>
+    }
 </div>
 
-@if (!string.IsNullOrWhiteSpace(ErrorMessage))
-{
-    <div class="error-banner">@ErrorMessage</div>
-}
-
-@if (!HasPdf)
-{
-    <div class="drop-hint">Drop or select a PDF to start.</div>
-}
-
-@if (HasPdf)
-{
-    <div class="document-shell" @ref="PdfHostRef" style="@($"width:{ViewportWidthPx}px")">
-        <canvas id="pdf-canvas" @ref="PdfCanvasRef"></canvas>
-
-        @if (ShowSignature)
-        {
-              <div class="overlay signature" @ref="OverlayRef"
-                  style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px; width:{OverlayWidthPx}px; height:{OverlayHeightPx}px;")"
-                  @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
-                <div class="overlay-controls">
-                    <button class="overlay-btn" @onclick="ApplySignature" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
-                    <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
-                </div>
-                <img src="@SignatureDataUrl" draggable="false" />
-            </div>
-        }
-
-        @if (ShowText)
-        {
-              <div class="overlay text" @ref="OverlayRef"
-                  style="@($"left:{OverlayXpx}px; top:{OverlayYpx}px;")"
-                  @onpointerdown="StartDrag" @onpointermove="OnDrag" @onpointerup="EndDrag" @onpointercancel="EndDrag">
-                <div class="overlay-controls">
-                    <button class="overlay-btn" @onclick="ApplyText" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✔</button>
-                    <button class="overlay-btn" @onclick="CancelOverlay" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation>✖</button>
-                </div>
-                <input class="overlay-input" @bind="TextValue" @onpointerdown:stopPropagation @onpointerup:stopPropagation @onclick:stopPropagation />
-            </div>
-        }
-    </div>
-
-    <div class="paging">
-        <button class="btn" @onclick="PrevPage" disabled="@(!CanPrev)">&lt;</button>
-        <span>Page @DisplayPage / @PageCount</span>
-        <button class="btn" @onclick="NextPage" disabled="@(!CanNext)">&gt;</button>
-    </div>
-}
-
 @if (ShowSignaturePadModal)
 {
     <div class="modal-backdrop">
@@ -85,6 +89,7 @@
 
     private string? PdfBase64;
     private string? OriginalPdfBase64;
+    private DotNetObjectReference<Index>? _dotNetRef;
     private int PageIndex;
     private int PageCount;
     private double ViewportWidthPx = 800;
@@ -120,6 +125,8 @@
         if (firstRender)
         {
             await JS.InvokeVoidAsync("pdfInterop.ensureReady");
+            _dotNetRef ??= DotNetObjectReference.Create(this);
+            await JS.InvokeVoidAsync("pdfInterop.registerDropHandler", _dotNetRef);
         }
 
         if (ShowSignaturePadModal)
@@ -129,35 +136,25 @@
     }
 
     private async Task HandleFileSelected(InputFileChangeEventArgs e)
+    {
+        if (e.FileCount == 0)
+        {
+            return;
+        }
+
+        await LoadPdfFromBrowserFile(e.File);
+    }
+
+    private async Task LoadPdfFromBrowserFile(IBrowserFile file)
     {
         ErrorMessage = null;
 
         try
         {
-            if (e.FileCount == 0)
-            {
-                return;
-            }
-
-            var file = e.File;
             await using var stream = file.OpenReadStream(maxAllowedSize: 20 * 1024 * 1024);
             using var ms = new MemoryStream();
             await stream.CopyToAsync(ms);
-            PdfBase64 = Convert.ToBase64String(ms.ToArray());
-            OriginalPdfBase64 = PdfBase64;
-
-            // Show the canvas before we start rendering
-            await InvokeAsync(StateHasChanged);
-            await Task.Yield();
-
-            // Make sure pdf.js is ready
-            await JS.InvokeVoidAsync("pdfInterop.ensureReady");
-
-            var result = await JS.InvokeAsync<RenderResult>("pdfInterop.loadPdf", PdfBase64);
-            PageCount = result.Pages;
-            PageIndex = 0;
-
-            await RenderPage();
+            await LoadPdfFromBase64Internal(Convert.ToBase64String(ms.ToArray()));
         }
         catch (Exception ex)
         {
@@ -168,6 +165,32 @@
         }
     }
 
+    [JSInvokable]
+    public Task LoadPdfFromBase64(string base64)
+    {
+        return LoadPdfFromBase64Internal(base64);
+    }
+
+    private async Task LoadPdfFromBase64Internal(string base64)
+    {
+        ErrorMessage = null;
+        PdfBase64 = base64;
+        OriginalPdfBase64 = PdfBase64;
+
+        // Show the canvas before we start rendering
+        await InvokeAsync(StateHasChanged);
+        await Task.Yield();
+
+        // Make sure pdf.js is ready
+        await JS.InvokeVoidAsync("pdfInterop.ensureReady");
+
+        var result = await JS.InvokeAsync<RenderResult>("pdfInterop.loadPdf", PdfBase64);
+        PageCount = result.Pages;
+        PageIndex = 0;
+
+        await RenderPage();
+    }
+
     private async Task RenderPage()
     {
         if (!HasPdf)
@@ -396,4 +419,10 @@
     private record RenderResult(int Pages);
 
     private record ViewportInfo(double Width, double Height, double PageWidth, double PageHeight);
+
+    public async ValueTask DisposeAsync()
+    {
+        _dotNetRef?.Dispose();
+        await Task.CompletedTask;
+    }
 }

EnvelopeGenerator.ReceiverUIBlazor/wwwroot/js/pdfInterop.js

@@ -264,6 +264,39 @@
 
             pointerPads.set(canvasId, { ctx, canvas });
         },
+        registerDropHandler: (dotNetRef) => {
+            if (window.__pdfDropRegistered) return;
+            window.__pdfDropRegistered = true;
+
+            const prevent = (e) => {
+                e.preventDefault();
+                e.stopPropagation();
+            };
+
+            ['dragenter', 'dragover', 'dragleave'].forEach(evt => {
+                document.addEventListener(evt, prevent, false);
+            });
+
+            document.addEventListener('drop', (e) => {
+                prevent(e);
+
+                const files = e.dataTransfer?.files;
+                if (!files || files.length === 0) {
+                    return;
+                }
+
+                const file = files[0];
+                const reader = new FileReader();
+                reader.onload = () => {
+                    const result = reader.result;
+                    if (typeof result === 'string') {
+                        const base64 = result.split(',')[1] || result;
+                        dotNetRef?.invokeMethodAsync('LoadPdfFromBase64', base64);
+                    }
+                };
+                reader.readAsDataURL(file);
+            }, false);
+        },
         clearSignaturePad: (canvasId) => {
             const pad = pointerPads.get(canvasId);
             if (!pad) return;