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.
This commit is contained in:
@@ -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);
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
|
||||
Reference in New Issue
Block a user