We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

static assets not loaded

Hello,

i use VS2022 Prof with .Net 7.x. I work on an existing ASP.Net Core hosted Blazor Wasm with Identity and SQL Server for the data, that i sent to the client via OData. The whole system was created with Radzen Blazor Studio and their  Blazor Components. This works.

Now i want to integrate the syncfusion blazor file manager, word and pdf viewer/editor (they have a lot of useful features and looking very good).

First i create a simple project with your blazor project template. All work as expected.

Then i use this as pattern for the existing project:

I add the css- and script-tag to the index.html, load the different Nuget-packages, add the entries in -import.razor and program.cs and create the razor page for the file manager.

But if i load the page it load/show some kind of 'labels', that came from the component but with no layout and no funtions!

It seems the css and scripts are not loaded. 

To take the 'server-part' out of the test i link the FileManagerAjaxSettings to your demo url, try to generate local assets with the CRG. But no success. It shows a page with no layout and no functions!

What is the problem?

Is there a way to say a component to use their own scripts and layout?

How can i point a component to the right scripts?


Thanks for help

Patric

 



12 Replies 1 reply marked as answer

SA SureshRajan Alagarsamy Syncfusion Team April 24, 2023 02:50 PM UTC

Hi Patric,


We have reviewed your query and understand that you are facing layout issues in the File Manager component. After reviewing your query, we suspect that an incorrect script and style tag reference may be the reason for your reported issue.


To help you resolve this issue, we have attached a documentation site that demonstrates how and which tag needs to be mapped on the client end. The documentation outlines two scenarios: when you use separate Syncfusion Blazor NuGet and when you use a single Syncfusion Blazor NuGet. In each scenario, specific tags need to be used to ensure that the component functions correctly.


Documentation : https://blazor.syncfusion.com/documentation/file-manager/getting-started


  1. Use the below script and style reference if you are using Syncfusion.Blazor complete NuGet.


[index.html]

 

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

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

 


  1. Use the below script and style reference if you are using Syncfusion.Blazor.Filemanager individual NuGet.


[index.html]

 

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

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

 


Check out the attached sample and get back to us if you need any further assistance.


Regards,
Suresh.


Attachment: FileManagerWASM_a2622cd2.zip


PG Patric Gehl April 28, 2023 07:27 AM UTC

Hi Suresh,

thanks for your reply, but your example was not the solution and my description was incomplete.


The Asp.Net Core hosted Blazor Wasm is with WebAssembly-Prerendering. So all the links to scripts and styles must go from 'Index.html' of the Client project to '_Host.cshtml' on the Server project.


Unfortunatly your VS template for Asp.Net Core hosted Blazor Wasm generate a solution with 'Index.html' so i need some time to understand the problem ('Index.html' and  '_Host.cshtml'  on the same solution is running = no warnings or errors; but strange results!).


So it will be helpfull, if your VS template beside the checkbox ' Asp.Net Core' also include a switch 'Index.html' or  '_Host.cshtml'.

Since the App is running in an Intranet, i looking for a CRG-solution.

So can you create an example with  '_Host.cshtml', FileManager with static scripts and styles (CRG-generated) so that i see what to place where (Client or Server project). And do you have an Example, that use Sql Server provider with filetable?


Thanks for your suport


Patric      



SA SureshRajan Alagarsamy Syncfusion Team May 2, 2023 02:40 PM UTC

Hi Patric,


We have reviewed your query with our shared sample in the Blazor WASM File Manager sample. We would like to inform you that whenever we create the Blazor WASM sample through Blazor template studio, the required script and style tags are included in the index.html file, and it will be loaded from the index.html file.


Based on your request, we have prepared a Blazor WASM File Manager sample with SQL File Provider, which we have attached it here for your reference.


If we have misunderstood your requirement, please share some additional details along with a confirmation on whether your project is created using our Blazor Template Studio?


UG linkhttps://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project 


This will help us to validate your query further and provide you with a prompt solution.


Regards,
Suresh.


Attachment: FileManagerSQL_File_Provider_99d38956.zip


PG Patric Gehl May 12, 2023 08:36 AM UTC

Hi Suresh,

thanks for your support and sorry for my late reply. I tested your solution and it worked; but not in my project; there it produce a lot of strange errors.




  1. Your example is not a  Blazor Wasm with WebAssembly-Prerendering (_Host.cshtml in server project) it use the client side index.html. My wish was an example with _Host.cshtml and CRG generated script- and style package and how to link them in the _Host.cshtml. 
  2. Your example use the SQL Server but not with SQL Server 'Filetable'. It use the old style of nvarbinary(max) in the column 'content' of the table 'product'. The advantage of 'Filetable' is that you can for ex. write with one process to a folder like the windows explorer and the table is automaticaly in sync!
  3. Your example use EJ2.Asp.Core in the Server project. Is there a Blazor-Version available?
  4. If i try to transfer your example to my project i get a lot of strange errors like:
  5. Schweregrad Code Beschreibung Projekt Datei Zeile Unterdrückungszustand

    Fehler CS0234 Der Typ- oder Namespacename "Http" ist im Namespace "Microsoft.AspNetCore" nicht vorhanden. (Möglicherweise fehlt ein Assemblyverweis.) MyAdmino.Client G:\Projekte_Win_7\Radzen_BlazorStudio\MyAdmino_8 - Kopie_small - Net_7\Server\Models\Base\FileManagerDirectoryContent.cs 3 Aktiv

    Fehler CS0246 Der Typ- oder Namespacename "IFormFile" wurde nicht gefunden (möglicherweise fehlt eine using-Direktive oder ein Assemblyverweis). MyAdmino.Client G:\Projekte_Win_7\Radzen_BlazorStudio\MyAdmino_8 - Kopie_small - Net_7\Server\Models\Base\FileManagerDirectoryContent.cs 44 Aktiv

    Fehler CS0234 Der Typ- oder Namespacename "Mvc" ist im Namespace "Microsoft.AspNetCore" nicht vorhanden. (Möglicherweise fehlt ein Assemblyverweis.) MyAdmino.Client G:\Projekte_Win_7\Radzen_BlazorStudio\MyAdmino_8 - Kopie_small - Net_7\Server\Models\Base\FileProviderBase.cs 3 Aktiv

    Fehler CS0246 Der Typ- oder Namespacename "FileStreamResult" wurde nicht gefunden (möglicherweise fehlt eine using-Direktive oder ein Assemblyverweis). MyAdmino.Client G:\Projekte_Win_7\Radzen_BlazorStudio\MyAdmino_8 - Kopie_small - Net_7\Server\Models\Base\FileProviderBase.cs 27 Aktiv


    And so on (54 errors!); but the project with the problems is the client project and the files are in the server project.

    Any idea what went wrong??

    Thanks for your support

    Patric



EW Eden Wheeler May 12, 2023 10:15 AM UTC

Hi Patric,

It sounds like you're having issues loading static assets for the Syncfusion Blazor File Manager, Word and PDF Viewer/Editor in your existing ASP.NET Core-hosted Blazor WASM application.

It's possible that the necessary CSS and script files for the Syncfusion components are not being loaded correctly if you can see labels but not layout or functions. Conflicts with the current CSS and scripts in your application are conceivable.

You can try loading the Syncfusion CSS and scripts separately from the CSS and scripts for your application to fix this. You may accomplish this by explicitly including the CSS and JavaScript in the Razor component or page that utilizes the Syncfusion components. The @using directive may also be used to provide the necessary namespaces for the Syncfusion components.

You may also isolate the Syncfusion components in their own layout page, independent of the rest of your application, as an alternative strategy. 

This will guarantee that just the Syncfusion components will load the Syncfusion CSS and JavaScript.

Additionally, there can be problems with how the Syncfusion components are initialized in your program. You may try looking through the console logs for any warnings or error messages pertaining to the Syncfusion components.

I hope this is useful.





PG Patric Gehl May 12, 2023 11:06 AM UTC

Hi Eden,

thanks for your fast reply. This is one of my problems. I could solve it by using the links to the scripts and the styles of the CDN in my  _Host.cshtml in the server project like this:

<head>

    <meta charset="utf-8" />

    <meta name="viewport" content="width=device-width, initial-scale=1.0" />

    <title>MyAdmino</title>

    <base rel='nofollow' href="~/" />

    <link rel='nofollow' href="css/bootstrap/bootstrap.min.css" rel="stylesheet" />

    <link rel='nofollow' href="_content/Radzen.Blazor/css/humanistic-base.css" rel="stylesheet" />

    <link rel="icon" rel='nofollow' href="favicon.ico" />

    <link rel='nofollow' href="css/site.css" rel="stylesheet" />

    <link rel='nofollow' href="css/syncfusion-blazor-icons.css" rel="stylesheet" />


    <component type="typeof(HeadOutlet)" render-mode="WebAssemblyPrerendered" />

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

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

</head>

But im not sure where to place and how to use the CRG packages.

The problem with 'naming mismatch' between is solved, i used 'fully qualified names'.

So my main problem is that the 'server side part' (the EJ2.ASPNet.Core) of the 'file manager' not  work with my 'client side'. The errors point to missing assembly. But when i try to load the Nuget Packages the system tells me that 'Microsoft.AspNetCore.Mvc' or 'Microsoft.Extensions.Http' are depreciated!


As far as i understand the 'file-Manager', it calls a server via its FileManagerAjaxSettings. There are 4 different Apis to call: Url to get the folder and files,  UploadUrl to upload files,  DownloadUrl to downlod files and GetImageUrl to Download images in the 'get directory content process'. This is all handeld in the 'filemanger-controller' and the linked 'file provider' in the 'models-folder'.

Question: Is it possible to separate the whole server part for 'file handling' in it's own project (with all the assemblys this project need) and link this as 'new part' with a 'server hosted Wasm' (Client project and server project with 'server' as start point)?

Any idea how to handle the references to depriciated Nuget Packs?


Thank

Patric

 



SA SureshRajan Alagarsamy Syncfusion Team May 16, 2023 02:20 PM UTC

Hi Patric,


We have reviewed your shared query, and we are quite unclear about your query. To provide you with the best assistance, we would appreciate some further clarification.


Based on your query, it seems that you are inquiring about rendering the File Provider part on the client end. However, in our shared sample, we have integrated the file provider into the server project. Could you please confirm your requirement more clearly?


Regards,
Suresh.



PG Patric Gehl May 23, 2023 11:01 AM UTC

Hi Suresh,

sorry for my late reply, but i could fix the main problems as follow:

First: Your example was working after i imported your database '

FileManager.mdf' in my lokal SQL Server Express and changed the connection string in 'appsettings.json'. So thanks for this working code.


The DB has one table 'Product' that store the file- and folder-data. 

The program 'SQLProviderController.cs' is the Server-part, that is called from the '

SfFileManager-component' of the client-page. The communication between the controller and the table is handled by the programm 'SQLFileProvider.cs'.

I hope i understand your example so far, or what is wrong?


Now i try to use your code in my project. As explained it is a ASP.Net Core hosted WASM with 'server prerendering'; so there is no 'Index.html' in the client project; instead there is a '  _Host.cshtml' in the server project. So i need to place the 'link' to the script- and style-files in this file. This is working with a link to the CDN like:

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

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

But how can i use  local CRG-files or more exact in what place of the server project should i place these files?


If i place your example in my project, i got these strange error message, that point to the client project, even if the code with the errors was in the server project. So i try to fix this!


First: i changed the namespace of the controller from 'EJ2APIServices.Controllers' to my project (MyAdmino.Controllers). I also delete the 'using Syncfusion.EJ2.----' clauses. I do the same with the fiels in the 'models' and 'models.base' folder. I also changed the 'using System.Data.SqlClient' to 'using Microsoft.Data.SqlClient'

Next there was a problem with the structure of 'ErrorDetails' in the files. But if i changed them to 'Syncfusion.Blazor.FileManager.ErrorDetails' all was fine.

An additional problem was 'GetImage(string path, string parentId, string id, bool allowCompress, ImageSize size, params FileManagerDirectoryContent[] data)';  here the parameter 'ImageSize'.  I saw in the controller this call:

'return operation.GetImage(args.Path, args.ParentID, args.Id, true, null, args.Data);'

where ' ImageSize' is null! Why doesn't the controller use   args. ImageSize ?


On the client page i add 

using MyAdmino.Server.Models.Base;

using MyAdmino.Server.Models;

and

<SfFileManager TValue="Server.Models.Base.FileManagerDirectoryContent" ShowThumbnail="true" AllowDragAndDrop="true" AllowMultiSelection="true">

Now the 'Base system' is running and i can make my program extension (40 character for a filename is very short or? The use of the 'varbinary(max)' for the content is ok; but i want to use the 'SQLFileTable' and so on).


So until now; thanks for your support!

But as you can imagine, there are some new questions!

  1. There is a 'limitation' of the filesize to upload! Do you have an example how to extend this size on startup of the 'FileManager'?
  2. There is a class 'AccessPermission' to restrict the 'file access'. But from my understanding these permissions need a link to a file or folder and a user account. So this is a typical n to m relation (one file allows different access for different user). So the question is where to store these relations and do you have some samples; best in combination with asp.net core identity? I think here the controller need the 'ASP.NetUser' as additional parameter, right? Or what is the best way to handle a secure data access?
Thanks for your support,

Patric





SA SureshRajan Alagarsamy Syncfusion Team May 24, 2023 02:45 PM UTC

Hi Patric,


We have reviewed your query and understand that you have two concerns with our File Manager component. Please find the answers below.


Query 1 : There is a 'limitation' of the filesize to upload! Do you have an example how to extend this size on startup of the 'FileManager'?


We recommend utilizing the "maxFileSize" property in the File Manager component. By setting the size in bytes, you can establish the maximum file upload limit. In this case, the maximum file size allowed in our File Manager component is 30,000,000 bytes. Refer to the below documentation link for further reference.


Documentation : https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_MaxFileSize


Refer to the below code snippet for further reference.


Code Snippet :


[Index.razor]

 

<SfFileManager TValue="FileManagerDirectoryContent">

    <FileManagerAjaxSettings Url="/api/FileManager/FileOperations"

                             UploadUrl="/api/FileManager/Upload"

                             DownloadUrl="/api/FileManager/Download"

                             GetImageUrl="/api/FileManager/GetImage">

    </FileManagerAjaxSettings>

    <FileManagerUploadSettings MaxFileSize="30000000 "></FileManagerUploadSettings>

</SfFileManager>

 


Query 2 : Access control in SQL File Provider.


We would like to inform you that we have already considered a feature request to provide access control support in SQL File Provider. This feature will be included in any of our upcoming releases. We prioritize feature implementations based on customer requests count, feature rank, and our Wishlist plan


You can track the feature status through the below feedback link.


Feedback : https://www.syncfusion.com/feedback/11741/access-control-support-for-sql-file-provider-in-file-manager-component


Check out the shared details and get back to us if you need any further assistance.


Regards,
Suresh.


Marked as answer

PG Patric Gehl May 24, 2023 02:59 PM UTC

Hi Suresh,


thanks for your fast reply!


Patric



PG Patric Gehl May 25, 2023 11:07 AM UTC

Hi Suresh,

i was too fast with my reply!


To increase the MaxFileSize is not working as expected:

<SfFileManager TValue="FileManagerDirectoryContent" AllowDragAndDrop="true" AllowMultiSelection="true" ShowFileExtension="true">

    <FileManagerUploadSettings MaxFileSize="52000000 "></FileManagerUploadSettings>

    <FileManagerAjaxSettings Url="/api/SQLProvider/SQLFileOperations"

                             UploadUrl="/api/SQLProvider/SQLUpload"

                             DownloadUrl="/api/SQLProvider/SQLDownload"

                             GetImageUrl="/api/SQLProvider/SQLGetImage">

        </FileManagerAjaxSettings>

</SfFileManager>

If i try to upload a pdf with ~ 35MB (far from 50MB) the upload start, but after 2% there is an error in the Controller by SQLUpload saying that 'data' is null!

If i try to upload files < 29MB all is ok! So do i need to change on some other positions?


The next problem arise with the 'Image Preview'. The 'ImageSize size' parameter is unknown. The system want a reference to 'Syncfusion.EJ2.FileManager'; that i don't want to use. If i delete the parameter, the files are shown in the file manager; but no preview! What is the datatype of ' ImageSize' and can i initialize it with some 'static structure'?


Also if i want to 'Preview' a PDF or a Word document in your components; the examples i saw use the path (wwwroot/...) and the filename to point the component to the right file to open. Since i use the SQLProvider i need to 'Download' the 'Content' as 'input' to the Component.

Since the 'Default Download' try to store the file, should i implement my 'own Controler'?


Thanks for help.


Patric  



SA SureshRajan Alagarsamy Syncfusion Team June 2, 2023 02:08 PM UTC

Hi Patric,

Query 1 : While uploading file more than 29 mb facing issue in the File Manager component with SQL File Provider.


We have previously addressed a similar issue regarding increasing the file upload size. We recommend reviewing the following forum discussions where we provided suggestions to resolve the issue.


Forum’s :

https://www.syncfusion.com/forums/153717/-wav-not-handled-when-uploading-with-blazor-file-upload?reply=NfrX2k


https://www.syncfusion.com/forums/158274/err-connection-reset-when-uploading-large-files-on-azure?reply=NtQOzw


Query 2 : The next problem arise with the 'Image Preview'. The 'ImageSize size' parameter is unknown. The system want a reference to 'Syncfusion.EJ2.FileManager'; that i don't want to use. If i delete the parameter, the files are shown in the file manager; but no preview! What is the datatype of ' ImageSize' and can i initialize it with some 'static structure'?


We would like to inform you that on the server-side, we retrieve the image data from the database using the provided image ID through the 'SqlDataReader' command. Subsequently, we create a 'FileStreamResult' object that converts the retrieved content into a byte array using MemoryStream. Finally, the 'FileStreamResult' object is returned with the content type set as 'APPLICATION/octet-stream'.


Therefore, it's important to note that the image size parameter doesn't affect any functionality in this context. You have the flexibility to add the file size on the client-side and retrieve it on the server-side. This allows you to customize the code in server end according to your specific needs


Query 3 : Also if i want to 'Preview' a PDF or a Word document in your components


We would like to share the documentation that provides code snippets on how to open PDF and Word documents from the database, along with a GitHub sample contains File Manager integration with PDF Viewer and Document Editor with Physical provider for reference.


PDFViewer Documentation : https://blazor.syncfusion.com/documentation/pdfviewer/opening-pdf-file#opening-a-pdf-from-database


DocumentEditor Documentation : https://blazor.syncfusion.com/documentation/document-editor/opening-a-document#opening-a-document-from-database


GitHub : https://github.com/SyncfusionExamples/Blazor-FileManager-Word-PDF/tree/master


Check out the shared details and get back to us if you need any further assistance.


Regards,
Suresh.



Loader.
Up arrow icon