I have several Blobs in a DB. These are displayed in an IFrame on a Popup, after the user clicks the button for a file on one of several possible components (.razor files). This works fine as long as I stay on the first component where I opened the Popup, but if I leave the component and reenter it i will always have null or empty on the IFrameSrc. This will also happen if I go to another component that could open a PDF. Reloading the page or opening it in a new Tab always fixes the problem. I noticed that when I dispose of the DotNetObjectReference at the end of HandelWantedFile further opening of PDFs will always throw an Excpetion and it will display the first file I opend on that component. This could be due to me not revoking the URL, but I still do not get how the old IFrameSrc is served instead.
Exception:
blazor.server.js:1 Uncaught (in promise) Error:System.ArgumentException: There is no tracked object with id '5'.Perhaps the DotNetObjectReference instance was already disposed.(Parameter 'dotNetObjectId') at Microsoft.JSInterop.…64dotNetObjectId) atMicrosoft.JSInterop.Infrastructure.DotNetDispatcher.BeginInvokeDotNet(JSRuntimejsRuntime,…fo, String argsJson)at y.endInvokeDotNetFromJS (blazor.server.js:1:3502)at Xt._invokeClientMethod (blazor.server.js:1:61001)at Xt._processIncomingData (blazor.server.js:1:58476)at Xt.connection.onreceive (blazor.server.js:1:52117)at s.onmessage (blazor.server.js:1:80262)
Does anybody have a idead on how to fix this or is able to point me in the right direction? I am currently unable to fix this myself. I need to display files from several components without forcing a reload upon first entering a component that could call the popup.
@* PdfPopUp.razor *@@namespace Project.Pages<MudDialog Style="width: 100%; height: 100%;"><DialogContent> @if (!string.IsNullOrEmpty(IframeSrc)) {<iframe id="pdfIframe" src="@IframeSrc" style="width: 100%; height: 100vh; border: none;" frameborder="0"></iframe> } else {<p>Error: IFrameSrc is not set.</p> }</DialogContent></MudDialog>@code { [Parameter] public string IframeSrc { get; set; } = string.Empty;}I call the PopUp like this
@* FirstComponent.razor *@@page "/FirstComponent"@attribute [Authorize(Roles = "user")]@namespace Project.Pages@inject IDialogService dialogService@inject IJSRuntime javaScript<button class="link-button" @onclick="@(x => HandleWantedFile()">@FileName@FileType</button>@code { [Parameter] public string IFrameSrc { get; set; } = string.Empty; private async Task HandleWantedFile() { byte[] file; file = await whaterver();//db call var dotNetReference = DotNetObjectReference.Create(this); await javaScript.InvokeVoidAsync("initializeBlobUrlCreation", dotNetReference); await javaScript.InvokeVoidAsync("createAndSetBlobUrl", "pdfIframe", file, "application/pdf", dotNetReference); var options = new DialogOptions { FullWidth = true, MaxWidth = MaxWidth.Large, CloseButton = true}; dialogService.Show<PdfPopUp>(currentBlob.FileName, new DialogParameters { ["IFrameSrc"] = this.IFrameSrc }, options); } [JSInvokable] public async Task SetIframeSource(string url) { IFrameSrc = url; await InvokeAsync(StateHasChanged); }}my JavaScript:
//wwwroot/JS/site.jsfunction initializeBlobUrlCreation(dotNetRef) { window.createAndSetBlobUrl = function(iframeId, byteArray, mimeType) { var blob = new Blob([new Uint8Array(byteArray)], { type: mimeType }); var url = URL.createObjectURL(blob); dotNetRef.invokeMethodAsync('SetIframeSource', url); var iframeElement = document.getElementById(iframeId); if (iframeElement) { iframeElement.src = url; } };}function createAndSetBlobUrl(iframeId, byteArray, mimeType) { var blob = new Blob([new Uint8Array(byteArray)], { type: mimeType }); var url = URL.createObjectURL(blob); DotNet.invokeMethodAsync('Project', 'SetIframeSource', dotNetReference, url); var iframeElement = document.getElementById(iframeId); if (iframeElement) { iframeElement.src = url; scalePDF(iframeId); }}function scalePDF(iframeId) { var iframe = document.getElementById(iframeId); if (iframe) { iframe.onload = function () { var pdfContent = iframe.contentWindow.document.getElementsByTagName('body')[0]; pdfContent.style.zoom = "100%"; }; }}