MudFileUpload not working in safari browser. about mudblazor

[ScarletKuro]

Sounds like a popup protection or so

More like Safari being a special snowflake as always 😒

[sardar97]

Sorry guys for being late to answer I was very busy.
@igotinfected I tried with MudBlazor Docs.Server as well it is not working only on safari.

See the Example video

[igotinfected]

Sorry guys for being late to answer I was very busy. @igotinfected I tried with MudBlazor Docs.Server as well it is not working only on safari.

See the Example video

No worries! Been looking for solutions ;) Thought we would need to revert the recent changes to MudFileUpload because of Safari behaviour but I may have found a more robust way that works on every browser while keeping the reworked MudFileUpload. Will be opening a PR tonight or tomorrow if everything goes well.

The short version of the issue is that Safari doesn't like when some events are triggered programmatically without direct user interaction. Since we are using JS interop to trigger the file picker, Safari won't acknowledge the action when it is executed via Blazor Server, I'm assuming because there is a back and forth between client & server which might not pass whichever checks Safari runs.

[ScarletKuro]

it doesn't work in my project but the docs site does work

Sounds like cache issue. If the functionality wasn't working, it wouldn't work in docs or trymudblazor.

[ScarletKuro]

All problems were solved via discord.

[ScarletKuro]

great, but it would be cool to have the solution here for the googlers

1. The opening issue in Safari was fixed via clearing cache, obj, and bin folders.
2. The problem in edge/chrome with reopening(firing twice) was solved by removing HtmlTag="label" from the button in the ActivatorContent since it wasn't clear to the person from the guide from where it should be removed.

[sardar97]

@henon

[ScarletKuro]

@igotinfected

[igotinfected]

@sardar97 can you describe what exactly isn't working + your version of MacOS and Safari? Seems to be working for me:

[sardar97]

@igotinfected actually it works for me as well with mudblazor doc but with my project not working I don't know why!
However I works on other browser with my project.
by the way my project render is Server Global
here a video I showed the codes which I used same as mudblazor doc and a picture to show my safari and Mac version.

Click to the Video

Screenshot :

[ScarletKuro]

Can you show your code?

[igotinfected]

@ScarletKuro it's in the video, but I can reproduce it just by running the current docs with the Docs.Server project and testing the first MudFileUpload examples. I'm not quite sure what is causing it though. It works on all other browsers, and adding logs to the mudWindow.click function shows that it is executed as expected... The drag and drop examples work with clicks btw.

Edit: missing words

[henon]

The short version of the issue is that Safari doesn't like when some events are triggered programmatically without direct user interaction.

Sounds like a popup protection or so

[Welchen]

Are we sure this is fixed? I am running 7.2.0/7.3.0 and still having the same problem that @sardar97 is reporting where it doesn't work in my project but the docs site does work. Was working in v6 but when I have now upgraded to v7 it doesn't work in Safari.

Also when using Edge the the Open and Cancel buttons will redisplay the dialog on the first use.

[igotinfected]

@Welchen other than the cache, make sure you remove the HtmlTag and for properties/attributes. These are no longer necessary and could be causing your issue:

v6

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ButtonTemplate>
        <MudButton HtmlTag="label"
                   Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload"
                   for="@context.Id">
            Upload Files
        </MudButton>
    </ButtonTemplate>
</MudFileUpload>

v7

<MudFileUpload T="IBrowserFile" FilesChanged="UploadFiles">
    <ActivatorContent>
        <MudButton Variant="Variant.Filled"
                   Color="Color.Primary"
                   StartIcon="@Icons.Material.Filled.CloudUpload">
            Upload Files
        </MudButton>
    </ActivatorContent>
</MudFileUpload>

[henon]

great, but it would be cool to have the solution here for the googlers

[Welchen]

2. The problem in edge/chrome with reopening(firing twice) was solved by removing HtmlTag="label" from the button in the ActivatorContent since it wasn't clear to the person from the guide from where it should be removed.

To elaborate, the documentation for MudFileUpload states to remove the HtmlTag if you have it. I looked at the MudFileUpload and didn't see one, so didn't think there was anything to be removed. That statement in the docs is in reference to the button or activator in the ActivatorContent. Didn't think to look down in there. Now that I know what I was supposed to be looking for, I understand it.