1. Home
  2. Forum
  3. Blazor
  4. Sample application for file manger produces Network Error: Failed to send on XMLHTTPResponse

Sample application for file manger produces Network Error: Failed to send on XMLHTTPResponse

I am trying to find a good example of the blazor File Manager control for client-side Blazor Web assembly.
On the getting started page (https://blazor.syncfusion.com/documentation/file-manager/getting-started/) 
there is code that can be downloaded towards the end of the page.
I downloaded the example code and set the default project to FileManager.Client.
When running the program I get the following error (see attached screenshot):

Network Error: Failed to send on XMLHTTPResponse Failed to load: /api/SampleData/FileOperations

Is the code out of date?
Is there a more recent version of this example that works?

Thanks

Attachment: FileManagerClientError_ab9a105e.zip

21 Replies
SP Sowmiya Padmanaban Syncfusion Team October 13, 2020 12:03 PM UTC

Hi ScottAtScorpios,  
 
Greetings from Syncfusion support. 
 
We have checked your attached screenshot, we suspect that your reported problem occurs due to server side method not triggers properly.  
 
For your reference, we have prepared a client side application for FileManager component. 
 
 
Refer to the below links to know more about the FileManager component. 
 
 
 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


SC ScottAtScorpios October 13, 2020 09:29 PM UTC

I downloaded your sample code and set the startup project to the Client project in the solution and it didn't work.
It produces the same error as I reported.

MK Muthukrishnan Kandasamy Syncfusion Team October 14, 2020 11:18 AM UTC

 
Hi Scott, 
 
Thanks for the update. 
 
We have validated your reported problem in Syncfusion Blazor File Manager component. We were unable to reproduce your reported problem in our end, the File Manager renders properly in our end. We suspect that you are using Normal Web Assembly type application in Blazor. For using server-side controllers in Client-Side Web Assembly application, we need to create the Hosted application in Blazor. 
 
Please refer to the below documentation link for more details. 
 
 
In our previous updated, we have shared sample also Hosted application. Please check on that sample. If the issue still persists, please share the issue replicating sample or else replicate your reported issue in the previously shared sample. This information would help us to provide you the prompt solution. 
 
Regards, 
Muthukrishnan K 
 


MD Mustafa Dikyar replied to Scott Thompson October 29, 2020 08:17 AM UTC

I am trying to find a good example of the blazor File Manager control for client-side Blazor Web assembly.
On the getting started page (https://blazor.syncfusion.com/documentation/file-manager/getting-started/) 
there is code that can be downloaded towards the end of the page.
I downloaded the example code and set the default project to FileManager.Client.
When running the program I get the following error (see attached screenshot):

Network Error: Failed to send on XMLHTTPResponse Failed to load: /api/SampleData/FileOperations

Is the code out of date?
Is there a more recent version of this example that works?

Thanks

Attachment: FileManagerClientError_ab9a105e.zip

Hi everyone,

I am having the exact same problem for file manager on Asp.Net MVC 5. I get the mentioned error after uploading the project to the server while having no problem on the local pc.

Have you found a solution?

Thank you for your interest.

Attachment: Screenshot_2_9489a841.rar

MD Mustafa Dikyar October 29, 2020 12:08 PM UTC

I'm getting this error because I'm running a subdirectory on iis. What should I do?

Edit :  After moving the project to the subdomaine, the problem was solved. But if I had to work from a subdirectory. I would continue to have the problem. I think we are dealing with an error that needs to be fixed.

SP Sowmiya Padmanaban Syncfusion Team November 2, 2020 12:41 PM UTC

Hi Mustafa Dikyar,  
 
We have checked your reported problem with FileManager component by hosting it on IIS.  But we were unable to replicate this issue from our end as FileManager component renders properly. 
 
Based on your shared details, we were unable to predict the exact details regarding IIS (which scenario you have used for hosting the application). Could you please share the below details to us which would help us to understand your problem and to provide you the prompt solution. 
 
·         Share the video footage for hosting the application in IIS. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 


SC ScottAtScorpios November 3, 2020 11:57 PM UTC

I am still having no luck with my server-side blazor app but appear to be getting closer. 
While the sample code provided works there must be something missing in my project.
In my project, 
1) I copied the file manager control to my razor page.
2) I created a Controllers folder and copied the SampleDataControler.cs file into the folder (Changed the namespace to my project's)
3) I created a Data Folder and copied the Files folder and files into that folder like in the example.
4) I added the Syncfusion EJ2 package to my project

When I navigate to the page I get the following console error

Bind must be called on a function TypeError: Bind must be called on a function at bind (<anonymous>)

SP Sowmiya Padmanaban Syncfusion Team November 4, 2020 01:13 PM UTC

Hi ScottAtScorpios,  
 
We have validated your reported problem with FileManager component. We need some more details from you to confirm whether your reported problem occurs in your application scenario only or it occurs in component level.  
 
So, could you please share us the following details. 
 
1.     Package version used in your application. 
2.     SDK version used in your application. 
3.     If possible, share the issue replicating sample. 
4.     Share the issue replicating video footage of you reported problem. 
 
Please let us know, if you need any further assistance. 
 
Regards,  
Sowmiya.P 



SC ScottAtScorpios November 17, 2020 11:35 PM UTC

I think I finally found the problem.
I need to add this line in my Startup,cs file

endpoints.MapControllers(); // Add Controller Mapping

I also switch from a client-side to a server-side blazor project.
since I was running into too many bugs/crashes


SP Sowmiya Padmanaban Syncfusion Team November 18, 2020 12:54 PM UTC

Hi ScottAtScorpios,  
 
We are happy to hear that your reported problem has been resolved. Please, get back to us if you need any further assistance. We will be happy to assist you. 
 
Regards,  
Sowmiya.P 


SA Saman Arianpour December 20, 2022 09:09 PM UTC

Hi Scott,

i had the same issue in blazor .NET 6 i solved it by  "app.MapControllers();"  for example:


app.UseStaticFiles();

app.UseRouting();

app.MapBlazorHub();

app.MapFallbackToPage("/_Host");

app.MapControllers();

app.Run();


WM Walter Martin December 28, 2022 11:13 PM UTC

None of the suggestion above is working in my project

I'm using a server side Blazor 20.3.0.60 and the filemanager is working properly when started locally from VisualStudio but it shows the error in attachment in the shared hosting server

I'm using .net 6.0

What am I doing wrong ?



Attachment: error_1570288e.zip

WM Walter Martin January 2, 2023 11:23 PM UTC

Don't worry about this problem, I found the solution by myself

Thanks in any case




VS Val Skordin January 29, 2023 02:41 AM UTC

Hi Walter,


I have a similar problem with my .NET 7 project.

What is your solution?


Thank you,

Val Skordin





SS Sivakumar ShunmugaSundaram Syncfusion Team January 30, 2023 02:27 PM UTC

Val Skordin, with the shared details, you are facing an issue with implementing the Blazor FileManager component with the dotnet 7 projects. But we are quite unclear about the exact issue you are facing at your end with implementing the Blazor FileManager component. From the previous comment, we suspect that you are facing an issue with mapping the controller in the dotnet 7 application. We have prepared a local sample of Blazor FileManager with version 7 and the sample works fine from our side. Also, we have shared code details to map the controller for your reference.


Refer to the below code snippet.

[Program.cs],

 

 

app.UseHttpsRedirection();

 

app.UseStaticFiles();

 

app.UseRouting();

 

app.MapBlazorHub();

app.MapFallbackToPage("/_Host");

app.UseEndpoints(endPoints =>

{

    endPoints.MapControllers();

});

 

app.Run();


Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorApp1-1725483833.zip


Check the shared details and sample for your reference. If the issue still persists, share the exact details related to your issue. This will allow us to fully understand your issue and provide a solution that meets your needs.


VS Val Skordin February 6, 2023 05:20 PM UTC

Hi Sivakumar,

Thank you for your response. First of all, no problem with your components in local demo applications. But, I found some issues with API & controllers when I tried to implement File Manager to an existing project (server-side Blazor). I am working on it and collecting all the necessary data before asking for help. 

Val




SS Shereen Shajahan Syncfusion Team February 8, 2023 12:30 PM UTC

Hi Val,

We will wait to hear from you.

Regards,

Shereen


BL Blazor February 8, 2023 06:39 PM UTC


Same problem here, but mine is becasue of "Authorize" Attribute.

When i commmetn out it works. Any idea why ?




WM Walter Martin February 8, 2023 08:12 PM UTC

Hi Val,

I solved removing the  <AuthorizeView> and  <Authorized> tags in the razor page below


<AuthorizeView>

    <Authorized>

        <SfFileManager TValue="FileManagerDirectoryContent">

            <FileManagerEvents TValue="FileManagerDirectoryContent" OnSend="send"></FileManagerEvents>

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

                                     UploadUrl="/api/SampleData/Upload"

                                     DownloadUrl="/api/SampleData/Download"

                                     GetImageUrl="/api/SampleData/GetImage">

            </FileManagerAjaxSettings>

        </SfFileManager>

</Authorized>

<NotAuthorized>

    </NotAuthorized>

</AuthorizeView>


HA Hamza replied to Walter Martin February 9, 2023 02:17 PM UTC

Can you please tell us how you solved it? I have the same problem...


HA Hamza February 9, 2023 05:53 PM UTC

All right it's solved for me, in my case I had to edit my controller, I changed this:

this.operation.RootFolder(this.basePath + "\\Data\\Files")

by this: 

this.operation.RootFolder(this.basePath + "Data\\Files")


Loader.
Up arrow icon