File Manager cannot connect API

[Hoai Nam]

The file manager on my Blazor SWAM project cannot access the API and it gives an error message as shown below. I still haven't found the cause. I look forward to helping. I have attached the project below. Thank,

Link Dowload

[Indhumathy Loganathan]

Hi Hoai,

Greetings from Syncfusion support.

We were unable to run the shared sample at our end. We were able to see the loading icon but the component is not rendered after it. Could you please share us the exact steps you have followed at your end. Based on the shared details, we will further validate the issue and revert you back with the details.

Regards,

Indhumathy L

[Hoai Nam]

I followed the sample on github and did it again.

Here is my Blazor code:

@page "/"

@using Syncfusion.Blazor.FileManager

@inject IJSRuntime JsRuntime;

<div class="control-section">

    <SfFileManager TValue="FileManagerDirectoryContent" AllowMultiSelection="true" ShowFileExtension="false" CssClass="height:100%">

        <FileManagerAjaxSettings Url="https://localhost:7158/api/FileManager/FileOperations"

                                 UploadUrl="https://localhost:7158/api/FileManager/Upload"

                                 DownloadUrl="https://localhost:7158/api/FileManager/Download"

                                 GetImageUrl="https://localhost:7158/api/FileManager/GetImage">

        </FileManagerAjaxSettings>

        <FileManagerDetailsViewSettings>

            <FileManagerColumns>

                <FileManagerColumn Field="Name" HeaderText="Name"></FileManagerColumn>

                <FileManagerColumn Field="DateModified" Format="MM/dd/yyyy h:mm tt" HeaderText="Modified"></FileManagerColumn>

                <FileManagerColumn Field="Size" HeaderText="Size"></FileManagerColumn>

            </FileManagerColumns>

        </FileManagerDetailsViewSettings>

    </SfFileManager>

</div>

And here is the code on the API:

[Route("api/[controller]")]

[ApiController]

public class FileManagerController : Controller

{

public PhysicalFileProvider operation;

public string basePath;

string root = "wwwroot\\Files";

public FileManagerController(IWebHostEnvironment hostingEnvironment)

{

this.basePath = hostingEnvironment.ContentRootPath;

this.operation = new PhysicalFileProvider();

this.operation.RootFolder(this.basePath + "Files");

}

[HttpPost("FileOperations")]

public object FileOperations([FromBody] FileManagerDirectoryContent args)

{

switch (args.Action)

{

case "read":

// reads the file(s) or folder(s) from the given path.

return this.operation.ToCamelCase(this.operation.GetFiles(args.Path, args.ShowHiddenItems));

case "delete":

// deletes the selected file(s) or folder(s) from the given path.

return this.operation.ToCamelCase(this.operation.Delete(args.Path, args.Names));

case "copy":

// copies the selected file(s) or folder(s) from a path and then pastes them into a given target path.

return this.operation.ToCamelCase(this.operation.Copy(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));

case "move":

// cuts the selected file(s) or folder(s) from a path and then pastes them into a given target path.

return this.operation.ToCamelCase(this.operation.Move(args.Path, args.TargetPath, args.Names, args.RenameFiles, args.TargetData));

case "details":

// gets the details of the selected file(s) or folder(s).

return this.operation.ToCamelCase(this.operation.Details(args.Path, args.Names, args.Data));

case "create":

// creates a new folder in a given path.

return this.operation.ToCamelCase(this.operation.Create(args.Path, args.Name));

case "search":

// gets the list of file(s) or folder(s) from a given path based on the searched key string.

return this.operation.ToCamelCase(this.operation.Search(args.Path, args.SearchString, args.ShowHiddenItems, args.CaseSensitive));

case "rename":

// renames a file or folder.

return this.operation.ToCamelCase(this.operation.Rename(args.Path, args.Name, args.NewName));

}

return null;

}

[HttpGet("Download")]

public IActionResult Download(string downloadInput)

{

//Invoking download operation with the required parameters.

// path - Current path where the file is downloaded; Names - Files to be downloaded;

FileManagerDirectoryContent args = JsonConvert.DeserializeObject(downloadInput);

return operation.Download(args.Path, args.Names);

}

[HttpPost("Upload")]

public IActionResult Upload(string path, IList uploadFiles, string action)

{

//Invoking upload operation with the required parameters.

// path - Current path where the file is to uploaded; uploadFiles - Files to be uploaded; action - name of the operation(upload)

FileManagerResponse uploadResponse;

uploadResponse = operation.Upload(path, uploadFiles, action, null);

if (uploadResponse.Error != null)

{

Response.Clear();

Response.ContentType = "application/json; charset=utf-8";

Response.StatusCode = Convert.ToInt32(uploadResponse.Error.Code);

Response.HttpContext.Features.Get().ReasonPhrase = uploadResponse.Error.Message;

}

return Content("");

}

[HttpGet("GetImage")]

public IActionResult GetImage(FileManagerDirectoryContent args)

{

//Invoking GetImage operation with the required parameters.

// path - Current path of the image file; Id - Image file id;

return this.operation.GetImage(args.Path, args.Id, false, null, null);

}

}

But I can't call the API and got the above error message.

Attachment: TodoList_760edb26.rar

[SureshRajan Alagarsamy]

Hi Hoai,

Upon further validation with your shared sample, we have identified that the inclusion of the “UseAuthorization” extension is contributing to the reported issue you've encountered. To address this matter, we strongly advise you to remove this extension from your Program.cs file. If you desire to implement authentication within your application, we have effectively handled a similar scenario in the feedback we've shared below. We encourage you to refer to this resource to successfully meet your requirement.

Feedback : https://www.syncfusion.com/feedback/32624/provide-support-to-customize-the-httphandler-in-blazor-file-manager

Additionally, we recommend that you remove the [ApiController] attribute from the controller segment responsible for handling the File Manager calls. If use the attribute, it may return null values from the File Manager component. Follow both the suggested ways to overcome the reported issue. Check out the modified sample and get back to us if you need any further assistance.

Regards,
Suresh.

Attachment: FileManager_WASMPhysicalProvider_7ba7bb81.zip

[Hoai Nam]

I was able to run the code from the file you resubmitted. Thank you Suresh for your support.