[Bug]: MudExDialogService.ShowFileDisplayDialog error/unexpected behaviour on specific data types

Question

[Bug]: MudExDialogService.ShowFileDisplayDialog error/unexpected behaviour on specific data types

Closed this issue 2 months ago · 22 comments

mreic commented 4 months ago

Contact Details

No response

What happened?

Previously, ShowFileDisplayDialog worked fine for any file type.

With updating to MudBlazor 7.0.0 combined with Extensions 2.0.0 i'm getting errors on Excel- and zip- Files.

Zip error is:
Microsoft.AspNetCore.Components.Server.Circuits.RemoteRenderer[100] Unhandled exception rendering component: Self referencing loop detected with type 'MudBlazor.Extensions.Core.MudExArchiveStructure'. Path '[4].Value[0].Path'. Newtonsoft.Json.JsonSerializationException: Self referencing loop detected with type 'MudBlazor.Extensions.Core.MudExArchiveStructure'. Path '[4].Value[0].Path'. at Newtonsoft.Json.Serialization.JsonSerializerInternalWriter.CheckForCircularReference(JsonWriter writer, Object value, JsonProperty property, JsonContract contract, JsonContainerContract containerContract, JsonProperty containerProperty)

Excel error is:

Microsoft.JSInterop.JSException: An exception occurred executing JS interop: JSON serialization is attempting to deserialize an unexpected byte array.. See InnerException for more details. ---> System.Text.Json.JsonException: JSON serialization is attempting to deserialize an unexpected byte array. at Microsoft.JSInterop.Infrastructure.ByteArrayJsonConverter.Read(Utf8JsonReader& reader, Type typeToConvert, JsonSerializerOptions options)

Opening a jpg results in:

Swiching to Native Control and back to MudExImageViewer shows the image again without any errors.

Executing Code:

string mimetype = String.IsNullOrEmpty(uploadedFile.uploaded_file_content_type) ? Utilities.Utilities.GetMimeType(uploadedFile.uploaded_file_orig_file_name) : uploadedFile.uploaded_file_content_type;

var parameters = new DialogParameters {
    { nameof(MudExFileDisplay.StreamUrlHandling), StreamUrlHandling.BlobUrl }
};

using (Stream stream = GetFileStream(uploadedFile))
{
    var reference = await DialogService.ShowFileDisplayDialog(stream, uploadedFile.uploaded_file_orig_file_name, mimetype, HandleContentError, ex => ex.JsRuntime = JS, parameters);
    await reference.Result;
}

Function GetFileStream:

private Stream GetFileStream(UploadedFileModel model)
{
    return File.OpenRead(Path.Combine(AppServerSettings.appServerSettings.functionSettings.UploadBaseFolder, model.uploaded_file_relative_filepath));
}

Expected Behavior

Opening all file types like before.

Screenshots

No response

Reproduction link

No response

What application type are you referring to?

ServerRendered

Custom Application Type

No response

MudBlazor.Extension Version

2.0.0

MudBlazor Version

7.0.0

What .net Version are you using?

.Net7

What browser are you using?

Chrome

Sample Solution

No response

Pull Request

No response

Code of Conduct

I agree to follow this project's Code of Conduct

Answer 1 · 2024-07-09T17:08:48.000Z

Sorry to hear, I currently can't help because I'm on vacation until 20th of August.
I hope it's just a browser or build cache problem on your site. In general it works https://mudex.azurewebsites.net/file-display also try.mudex.org is updated to mudblazor 7 and mudex 2.0.0

Answer 2 · 2024-07-09T17:43:52.000Z

Have a great vacation then.
Ill check the docs again. Maybe i can figure it out myself.

Answer 3 · 2024-07-12T06:36:32.000Z

Sorry to hear, I currently can't help because I'm on vacation until 20th of August. I hope it's just a browser or build cache problem on your site. In general it works https://mudex.azurewebsites.net/file-display also try.mudex.org is updated to mudblazor 7 and mudex 2.0.0

I would say that examples on mudex.org dont really work in general. If you open this page, and select the png from the dropdown, the image in die MudExFileDisplay is shown properly. If you then click the "Show as Dialog"-Button. then you get my reported error for the .jpg file.

I know you are on vacation. I dont want to get you you out of that. I just type my investigations here if im able to make more.

Answer 4 · 2024-07-12T08:20:12.000Z

No problem can read it on mobile but can't work on it.
However looks like the FileService revokes the blob url to early so I would guess that some dispose pattern changed on mudblazor base components. However as workaround maybe you can set the streamurl handling to dataurl.
I currently don't know the property name but I know that I ve created a config for this ;)

Answer 5 · 2024-07-12T09:12:35.000Z

However as workaround maybe you can set the streamurl handling to dataurl.

I needed to make adjustments to Program.cs first. Data-Url handling leads to errors (SignalR file size exceeded) in the first place.
Adding the following code provides functionality again:

builder.Services.Configure<HubOptions>(options =>
{
    options.MaximumReceiveMessageSize = null;
});

Behavior is different but not as expected.
I've set the StreamUrlHandling property to DataURL. Loading an Image first time results in:

Again switching to "Native Control" produces the following:

Switching back to MudEx-Control shows the image correctly:

Behaviour for Excel-Files:
First you get this message:

Switching to the Native Control (Browser Extension) shows the file correctly. BlobURL won't do that.

Essentially i would need the blob-url handling to work because of probably large files.

Answer 6 · 2024-07-12T14:22:17.000Z

Yeah for sure. I will fix it as soon as possible for me. Thanks for research

Answer 7 · 2024-07-16T21:17:11.000Z

So I used the mac book from my wife and created a fix.

Its fixed in 2.0.2 https://www.nuget.org/packages/MudBlazor.Extensions/2.0.2

Answer 8 · 2024-07-17T07:45:12.000Z

@mreic can you check if everything works again please. Problem in general was a wrong position in stream before creating the blob. Don't know why this is now different.

Answer 9 · 2024-07-17T07:46:40.000Z

@mreic can you check if everything works again please. Problem in general was a wrong position in stream before creating the blob. Don't know why this is now different.

Im on it atm. Will give you feedback soon.

Answer 10 · 2024-07-17T07:52:13.000Z

@fgilde Unfortunately nothing really changed.

The MudExFileDisplay embedded on the page is set to StreamUrlHandling="StreamUrlHandling.DataUrl". The Dialog is set to StreamUrlHandling="StreamUrlHandling.BlobUrl".

Ill append the excecuting code. Its a newly created Blazor Server Application. Just installed MudBlazor and MudEx and modified the Index page for testing purposes.

@page "/"
@inject IDialogService DialogService

<PageTitle>Index</PageTitle>

<MudStack>
    <MudStack Row="true">
        <MudSelect T="string" Value="filename" ValueChanged="FileChanged" Variant="Variant.Outlined">
            <MudSelectItem T="string" Value="@("hexaqm1z.xlsx")" />
            <MudSelectItem T="string" Value="@("1cyu52e3.docx")" />
            <MudSelectItem T="string" Value="@("4afqphtg.json")" />
            <MudSelectItem T="string" Value="@("a5l0wgdf.pdf")" />
            <MudSelectItem T="string" Value="@("BP2Tungsten.csv")" />
            <MudSelectItem T="string" Value="@("c20kolsk.jpg")" />
            <MudSelectItem T="string" Value="@("eea4xkuw.zip")" />
            <MudSelectItem T="string" Value="@("jq4plkvj.exe")" />
            <MudSelectItem T="string" Value="@("lxelroci.png")" />
            <MudSelectItem T="string" Value="@("zu3n4uly.ai")" />
        </MudSelect>
        <MudButton OnClick="OpenAsDialog" Variant="Variant.Outlined">
            Open as Dialog
        </MudButton>
    </MudStack>
@if(file != null)
{
    <div style="width: 90%; height: 800px">
        <MudExFileDisplay HandleContentErrorFunc="@HandleContentError"
                          StreamUrlHandling="StreamUrlHandling.DataUrl"
                          Dense="true"
                          FileName="@filename" ContentStream="@file" ContentType="@MimeMapping.GetMimeMapping(filename)" ></MudExFileDisplay>
    </div>
}
</MudStack>

@code{
    string filename;

    Stream file;

    protected override async Task OnInitializedAsync()
    {
        filename = "hexaqm1z.xlsx";

        file = File.OpenRead($"C:\\Temp\\{filename}");

        await base.OnInitializedAsync();
    }

    private void FileChanged(string newFileName)
    {
        filename = newFileName;
        file = File.OpenRead($"C:\\Temp\\{filename}");
        StateHasChanged();
    }

    private async Task OpenAsDialog()
    {
        var parameters = new DialogParameters {
            { nameof(MudExFileDisplay.StreamUrlHandling), StreamUrlHandling.BlobUrl },
            { nameof(MudExFileDisplay.Dense), true }
        };
        await DialogService.ShowFileDisplayDialog(file, filename, MimeMapping.GetMimeMapping(filename), HandleContentError, null, parameters);
    }

Answer 11 · 2024-07-17T08:04:20.000Z

Ok then I need to invest more in this. The part on the demo page now works correctly. Maybe it's a server side problem, will check that.
If possible it would help if you can upload a whole solution where the problem occurs.

Answer 12 · 2024-07-17T08:15:10.000Z

If possible it would help if you can upload a whole solution where the problem occurs.

You need files also? Then i need to get testing material.

Answer 13 · 2024-07-17T08:41:54.000Z

You can add Test material if you have to the solution. You can also download the files from mudex.azurewebsites.net

Answer 14 · 2024-07-17T09:14:01.000Z

MudBlazor7 and Extention Tests.zip
You will find the solution including some files for testing purposes.

Needless to say that you will have to rewrite the paths in Index.razor accordingly.

Answer 15 · 2024-07-17T09:29:07.000Z

Thank you. Will have a look later when I arrived at the next location

Answer 16 · 2024-07-31T08:36:24.000Z

Thank you. Will have a look later when I arrived at the next location

No hurries! Just wanted to know if you had time to take a look at the Test-Project

Answer 17 · 2024-08-06T07:03:18.000Z

Sorry for delay.

However its not directly my bug, something changed in .NET 7 in the blazor server circuit handling. That means the stream in your sample is read on server but when statechanged on client is trying to render the Stream position is still wrong (or something similar not 100% sure)

But however if you read and copy the stream to the binded stream it works

    Stream file;



    private void FileChanged(string newFileName)
    {
        filename = newFileName;
        var read = File.OpenRead(Path.Combine(dir, newFileName));
        read.Position = 0;
        this.file = new MemoryStream();
        read.CopyTo(file);
        this.file.Position = 0;
        StateHasChanged();
    }

I changed this in your solution. Also created a better way to have your file list and improved a bit. So please have a look.
MudBlazor7 and Extention Tests.zip

Notice: On zip files you still get an error. This was an error in my project that is already fixed and will be released today in version 2.0.3 but then you need to use MudBlazor 7.5.0 instead of 7.2.0

Answer 18 · 2024-08-13T10:20:24.000Z

Generally it seems to work fine now. Thank you!
Only Issue i have is your Excel-Viewcontrol. This wont load, at least for my sample data.
Is there a way to ignore the MudExFileDisplayExcel?

Answer 19 · 2024-08-14T08:06:54.000Z

Not yet but I will build that. It's a good idea

Answer 20 · 2024-08-14T08:32:32.000Z

I would not mind using your Excel-Implementation if it works just fine.
But until then it would be nice to beeing able to configure that ;)

Edit: I also can have a look at how this can be archived if you don't mind.

Answer 21 · 2024-09-02T16:30:56.000Z

its done in 2.0.4

You can ignore it like this

    <MudExFileDisplay IgnoredRenderControls="new []{typeof(MudExFileDisplayExcel)}" 
FileName="@SampleFile.Name" Url="@SampleFile.Url" ContentType="@SampleFile.ContentType"></MudExFileDisplay>

Answer 22 · 2024-09-06T10:21:53.000Z

sure to use the setting in a dialog you can do it like this

DialogParameters parameters = new DialogParameters
{
    { nameof(MudExFileDisplay.IgnoredRenderControls), new[] {typeof(MudExFileDisplayExcel)} }
};
await DialogService.ShowFileDisplayDialog(SampleFile.Url, SampleFile.Name, SampleFile.ContentType, null, parameters);