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
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
[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>
|
[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.
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
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 link: https://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.
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.
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
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.
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
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.
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!
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.
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.
Check out the shared details and get back to us if you need any further assistance.
Regards,
Suresh.
Hi Suresh,
thanks for your fast reply!
Patric
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
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.
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.