TekH
0780dbdd94
- 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.
113 lines
3.4 KiB
Plaintext
113 lines
3.4 KiB
Plaintext
@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" />
|
|
|
|
<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>
|
|
<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" };
|
|
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);
|
|
}
|
|
}
|
|
}
|
|
|