File Upload - Nothing happens when clicking on Browse button

[Fritz]

Hello

I have a Blazor Server Web App (.Net 6) and just started using Syncfusion (19.40.0.53) this week. I have followed the instructions to set up Blazor components in Program.cs and installed my community license keys. I have been successful in reproducing your Cascading Dropdown example.

However, when I try the FileUpload component, the component renders correctly but nothing happens when I click on the Browse button. The button highlights but there is no prompt to select a file. When I drag a file onto the drop box, the file is immediately downloaded. The FileSelectedHandler is not fired. My code is below:

@page "/userfilesmanager"

@using Syncfusion.Blazor.Inputs

<h3>Component</h3>

<SfUploader MaxFileSize=104857600 AutoUpload=false>

         <UploaderEvents FileSelected="@FileSelectedHandler"></UploaderEvents>

 </SfUploader>

<style>

    .control-wrapper {

        width: 350px;

        margin: 0 auto;

    }

</style>

@code {

    private void FileSelectedHandler(SelectedEventArgs args)

    {

        // Here, you can customize your code.

    }

}

[Fritz]

I think I have solved this issue. The problem was the line of code in my program.cs file, which I found in one of the SyncFusion tutorials:

builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });

The input component worked when I modified it to this:

builder.Services.AddSyncfusionBlazor();

I hope this helps someone. Or if someone can explain when/why the option => options.IgnoreScriptIsolation = true; is needed that would be helpful.

thanks!

[Sureshkumar P]

Fritz, 

We are glad to know that the issue is resolved in your end. Please get back to us if you need further assistance on this. 

Regards, 

Sureshkumar P 

[Prince Oliver]

Hi Fritz, 

Syncfusion Blazor Service is registered by setting IgnoreScriptIsolation property as true to load the scripts externally. Please refer to the following documentation 

https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio#register-syncfusion-blazor-service 

Regards, 

Prince 

[Fritz]

Thanks for your reply Prince.

However, as I indicated above - if I include this line:

builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; });

..then my SyncFusion components do not seem to work correctly:

a) Menu layout is wrong (location of items on window is out of whack)

b) Dropdowns do not work at all.

If I replace that line with:  builder.Services.AddSyncfusionBlazor(); then all works well.

W

[Prince Oliver]

Hi Fritz, 

We suspect you have included incorrect script or theme reference in your end. When IgnoreScriptIsolation is set as true, we need to refer the theme and script files externally in the application’s “~/wwwroot/index.html” file. Based on NuGet package installed in your application script and theme files may vary. 

For Syncfusion.Blazor package 

Script: <script src="_content/Syncfusion.Blazor/scripts/syncfusion-blazor.min.js"  type="text/javascript"></script> 

Theme: <link rel='nofollow' href="_content/Syncfusion.Blazor/styles/bootstrap5.css" rel="stylesheet" / 

For individual component package like Syncfusion.Blazor.DropDowns 

Theme: <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" /> 

Script: <script src="_content/Syncfusion.Blazor.Core/scripts/syncfusion-blazor.min.js" type="text/javascript"></script> 

Please ensure whether you have added proper script and theme reference in your end and share the additional details on the issue, if you still face any. 

Regards, 

Prince 

[Fritz]

Many thanks Prince. That seemed to have worked after I put the above into my _Layout.cshtml file.

Now the dropdowns work if I include  builder.Services.AddSyncfusionBlazor(options => { options.IgnoreScriptIsolation = true; }); in my Program.cs file.

I have one question though: how doe the rel='nofollow' href to "

_content/Syncfusion.Blazor.Themes/bootstrap5.css" work?

If I look in my wwwroot folder, there is no _content subfolder? Can you maybe just confirm this is correct?

Thanks again for your help!

[Sureshkumar P]

Hi Fritz, 

 

Syncfusion Blazor themes are present as static web assets in Syncfusion.Blazor.Themes package. To refer the styles in the project we use " <link rel='nofollow' href="_content/Syncfusion.Blazor.Themes/bootstrap5.css" rel="stylesheet" />” this loads the added styles from the package and applies the styles to the components. These styles will be added dynamically to the components and these styles will not be present in the wwwroot folder of the application. The styles can be seen in browser as in below image 

 

 

 

Please refer the below links for your reference to refer the styles   

https://blazor.syncfusion.com/documentation/appearance/themes   

  

Kindly try with above information and get back to us if you have any queries. 

 

Regards, 

Sureshkumar P 

[Fritz]

Thank you very much for this clarification Sureshkumar.

Kind Regards

Fritz

[Sureshkumar P]

Fritz, 

 

Thanks for your update. 

 

Regards, 

Sureshkumar P