Add PDF viewer with drag-and-drop file upload support

Added a new Razor page `EnvelopeReceiverPage_DxPdfViewer.razor` with a route `/envelope/DxPdfViewer`. Integrated DevExpress components, including `DxPdfViewer` for displaying PDF documents and `DxFileInput` for drag-and-drop file uploads. Styled the drag-and-drop zone with custom CSS. Initialized the viewer with a default embedded PDF file and implemented logic to handle file uploads dynamically.
2026-06-11 15:33:22 +02:00
parent 88b196ed6d
commit 8c42105f58
1 changed files with 81 additions and 0 deletions
--- a/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_DxPdfViewer.razor
+++ b/EnvelopeGenerator.ReceiverUI/Pages/EnvelopeReceiverPage_DxPdfViewer.razor
@@ -0,0 +1,81 @@
+@page "/envelope/DxPdfViewer"
+@using System.IO
+@using DevExpress.Blazor
+@using System.Reflection
+
+<link href="_content/DevExpress.Blazor.Themes/blazing-berry.bs5.min.css" rel="stylesheet" />
+<link href="_content/DevExpress.Blazor.Reporting.Viewer/css/dx-blazor-reporting-components.bs5.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;
+        }
+</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>
+<DxPdfViewer CssClass="w-100 pdf-viewer" DocumentContent="DocumentContent" />
+
+@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);
+        }
+    }
+}