From 0780dbdd94d2f9b6da43925bd82211b0d9d6abb1 Mon Sep 17 00:00:00 2001
From: TekH <h.tek@digitaldata.works>
Date: Thu, 11 Jun 2026 17:13:17 +0200
Subject: [PATCH] Enhance PDF viewer and add embed page with file upload

- Added CSS styles for `.pdf-viewer` and its child elements
  to ensure proper dimensions and layout for PDF display.
- Enhanced `EnvelopeReceiverPage_DxPdfViewer.razor` with
  conditional rendering for improved user feedback.
- Introduced `EnvelopeReceiverPage_embed.razor` with a new
  route `/envelope/Embed`, drag-and-drop file upload, and
  embedded PDF viewer using `<embed>`.
- Implemented default PDF loading from embedded resources
  and Base64 encoding for embedding.
- Refactored file upload handling with `OnFilesUploading`
  and centralized allowed file types logic.
- Improved user experience with success and informational
  messages for file upload and PDF viewing.
---
 .../EnvelopeReceiverPage_DxPdfViewer.razor    |  36 ++++-
 .../Pages/EnvelopeReceiverPage_embed.razor    | 123 ++++++++++++++++++
 2 files changed, 157 insertions(+), 2 deletions(-)
 create mode 100644 EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_embed.razor

diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_DxPdfViewer.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_DxPdfViewer.razor
index 868968a1..86eb1943 100644
--- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_DxPdfViewer.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_DxPdfViewer.razor
@@ -30,6 +30,24 @@
         .custom-drop-zone > *:not(#overviewDemoSelectButton) {
             pointer-events: none;
         }
+
+    .pdf-viewer {
+        height: 800px !important;
+        min-height: 800px !important;
+    }
+
+    .pdf-viewer .dxbrv-surface-wrapper,
+    .pdf-viewer .dxbrv-document-surface {
+        height: 100% !important;
+        min-height: 750px !important;
+    }
+
+    .pdf-viewer .dxbrv-report-preview-content {
+        width: auto !important;
+        height: auto !important;
+        min-width: 200px !important;
+        min-height: 200px !important;
+    }
 </style>
 
 <div id="overviewDemoDropZone" class="card custom-drop-zone rounded-3 w-100 m-0">
@@ -50,7 +68,20 @@
              FilesUploading="OnFilesUploading"
              MaxFileSize="2000000">
 </DxFileInput>
-<DxPdfViewer CssClass="w-100 pdf-viewer" DocumentContent="DocumentContent" />
+
+@if (DocumentContent != null && DocumentContent.Length > 0)
+{
+    <div class="alert alert-success mt-3">
+        PDF loaded: @DocumentContent.Length bytes
+    </div>
+    <DxPdfViewer CssClass="w-100 pdf-viewer" DocumentContent="@DocumentContent" />
+}
+else
+{
+    <div class="alert alert-info mt-3">
+        Please upload a PDF file to view it.
+    </div>
+}
 
 @code {
     readonly List<string> ALLOWED_FILE_TYPES = new List<string> { ".pdf" };
@@ -77,4 +108,5 @@
             await InvokeAsync(StateHasChanged);
         }
     }
-}
\ No newline at end of file
+}
+
diff --git a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_embed.razor b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_embed.razor
new file mode 100644
index 00000000..83834158
--- /dev/null
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_embed.razor
@@ -0,0 +1,123 @@
+@page "/envelope/Embed"
+@using System.IO
+@using DevExpress.Blazor
+@using System.Reflection
+
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+
+<style>
+    .custom-drop-zone {
+        padding: 0 !important;
+        border-style: dashed;
+        border-width: 2px !important;
+        height: 230px;
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+        justify-content: center;
+        background-color: rgba(183, 183, 183, 0.1);
+    }
+
+        .custom-drop-zone.custom-drop-zone-hover {
+            border-style: solid;
+        }
+
+        .custom-drop-zone svg {
+            width: 42px;
+            height: 42px;
+        }
+
+        .custom-drop-zone > *:not(#overviewDemoSelectButton) {
+            pointer-events: none;
+        }
+
+    .pdf-viewer {
+        height: 800px !important;
+        min-height: 800px !important;
+    }
+
+    .pdf-viewer .dxbrv-surface-wrapper,
+    .pdf-viewer .dxbrv-document-surface {
+        height: 100% !important;
+        min-height: 750px !important;
+    }
+
+    .pdf-viewer .dxbrv-report-preview-content {
+        width: auto !important;
+        height: auto !important;
+        min-width: 200px !important;
+        min-height: 200px !important;
+    }
+</style>
+
+<div id="overviewDemoDropZone" class="card custom-drop-zone rounded-3 w-100 m-0">
+    <span class="drop-file-icon mb-3"></span>
+    <span class="drop-file-label">Drag and Drop File Here</span><span class="m-1">or</span>
+    <DxButton Id="overviewDemoSelectButton"
+              CssClass="m-1"
+              RenderStyle="ButtonRenderStyle.Primary"
+              Text="Select File" />
+</div>
+<DxFileInput @ref="fileInput"
+             AcceptedFileTypes="@ALLOWED_FILE_TYPES"
+             AllowedFileExtensions="@ALLOWED_FILE_TYPES"
+             CssClass="w-100"
+             ExternalDropZoneCssSelector="#overviewDemoDropZone"
+             ExternalDropZoneDragOverCssClass="custom-drop-zone-hover"
+             ExternalSelectButtonCssSelector="#overviewDemoSelectButton"
+             FilesUploading="OnFilesUploading"
+             MaxFileSize="2000000">
+</DxFileInput>
+
+@if (DocumentContent != null && DocumentContent.Length > 0)
+{
+    <div class="alert alert-success mt-3">
+        PDF loaded: @DocumentContent.Length bytes
+    </div>
+    <embed src="@GetPdfDataUrl()" type="application/pdf" class="w-100 pdf-viewer" />
+}
+else
+{
+    <div class="alert alert-info mt-3">
+        Please upload a PDF file to view it.
+    </div>
+}
+
+@code {
+    readonly List<string> ALLOWED_FILE_TYPES = new List<string> { ".pdf" };
+    DxFileInput fileInput;
+    byte[] DocumentContent { get; set; }
+    
+    protected override void OnInitialized()
+    {
+        Assembly assembly = Assembly.GetExecutingAssembly();
+        Stream stream = assembly.GetManifestResourceStream("EnvelopeGenerator.ReceiverUI.Resources.Invoice.pdf");
+        if (stream != null)
+        {
+            using (stream)
+            using (var binaryReader = new BinaryReader(stream))
+                DocumentContent = binaryReader.ReadBytes((int)stream.Length);
+        }
+    }
+    
+    protected async Task OnFilesUploading(FilesUploadingEventArgs args)
+    {
+        using (MemoryStream stream = new MemoryStream())
+        {
+            IFileInputSelectedFile file = args.Files[0];
+            await file.OpenReadStream(file.Size).CopyToAsync(stream);
+            DocumentContent = stream.ToArray();
+            await InvokeAsync(StateHasChanged);
+        }
+    }
+    
+    private string GetPdfDataUrl()
+    {
+        if (DocumentContent == null || DocumentContent.Length == 0)
+            return string.Empty;
+        
+        string base64 = Convert.ToBase64String(DocumentContent);
+        return $"data:application/pdf;base64,{base64}#toolbar=0&navpanes=0&scrollbar=1";
+    }
+}
+