Invoking non-API actions from FileManager

[Domenico Carlo]

Hi,

I've integrated FileManager component successfully from Syncfusion EJ2 19.4.0.54 into my personal ASP.NET Core MVC 6 application. I've used it in the following view:

Index.cshtml

@using Syncfusion.EJ2

@{
    string[] items = new string[] { "Delete", "Download", "SortBy", "Refresh", "Selection", "View", "Details" };
    string[] files = new string[] { "Open", "|", "Delete", "Download", "|", "Details" };
    string[] folder = new string[] { "Open", "|", "Delete", "Download", "|", "Details" };
    string[] layout = new string[] { "SortBy", "View", "Refresh", "|", "Details", "|", "SelectAll" };
}
 @* Syncfusion Essential JS 2 Styles *@
<link rel="stylesheet" rel='nofollow' href="https://cdn.syncfusion.com/ej2/material.css" />
@* Syncfusion Essential JS 2 Scripts *@
<script src="https://cdn.syncfusion.com/ej2/dist/ej2.min.js"></script>
<h1>@T["File manager"]</h1>
<div class="col-lg-12 control-section">
    <div class="control_wrapper">
        @* File Manager API sample *@
        <ejs-filemanager id="filemanager" view="@Syncfusion.EJ2.FileManager.ViewType.LargeIcons">
            <e-filemanager-ajaxsettings url="/api/filemanager/FileOperations"
                                        downloadUrl="/api/filemanager/Download">
            </e-filemanager-ajaxsettings>
            <e-filemanager-contextmenusettings file="files" folder="folder" layout="layout">
            </e-filemanager-contextmenusettings>
            <e-filemanager-toolbarsettings items="items">
            </e-filemanager-toolbarsettings>
            <e-filemanager-navigationpanesettings visible="true">
            </e-filemanager-navigationpanesettings>
        </ejs-filemanager>
    </div>
</div>
<style>
    #filemanager .e-empty-inner-content {
        display: none;
    }
</style>
@* Syncfusion Essential JS 2 ScriptManager *@
<ejs-scripts></ejs-scripts>

where  url="/api/filemanager/FileOperations" and downloadUrl="/api/filemanager/Download" invoke API actions.

Can I invoke non-API actions from url and downloadUrl attributes?

[Keerthana Rajendran]

  

Hi Domenico, 

 

Thanks for contacting Syncfusion support. 

 

Based on the shared details, we suspect that you need to render the File Manager from the client side without any server side (API) actions.

 

By default, all the file operations of the File Manager component are performed using client to server interaction. Currently, we don’t have direct support to perform file operations without server interactions. However, for your requirement to use File Manager without API actions, you can host our service provider by using Azure or any other hosting environment. By mapping the hosted Url at ajaxsettings, you can render the File Manager within the razor page and able to perform all the file operations.  

 

Refer to the below demo sample, where we used online hosted service links for file operations. 

 

https://ej2.syncfusion.com/aspnetcore/FileManager/Overview#/bootstrap5 

 

If we have misunderstood, kindly elaborate on your requirement with few more details so that we can check and provide a prompt response. 

 

Regards, 

Keerthana R. 

[Domenico Carlo]

OK. So, I can't invoke non-API actions like those ones below. Right?

[Route("filemanager")]
public class FileManagerController : Controller
{
    ...
    public ApiController(
     ...
    )
    {
      ...
    }
    
    [Route("FileOperations")]
    [HttpPost]
    public object FileOperations([FromBody] FileManagerDirectoryContent args)
    {
      ...
    }
    // Processing the Download operation
    [Route("Download")]
    [HttpPost]
    public IActionResult Download(string downloadInput)
    {
       ...
    }
}

[Keerthana Rajendran]

Hi Domenico, 

 

We have prepared an Asp.Net Core application with File Manager without using API controller for your reference.  

 

Refer to the following code. 

 

<ejs-filemanager id="file"> 

    <e-filemanager-ajaxsettings url="/Index?handler=FileOperations" downloadUrl="/Index?handler=Download"> 

    </e-filemanager-ajaxsettings> 

     <e-filemanager-navigationpanesettings visible="true"> 

     </e-filemanager-navigationpanesettings> 

</ejs-filemanager> 

 

public PhysicalFileProvider operation; 

        public string basePath = "D:\\Documents\\Files"; 

        public IndexModel(IHostingEnvironment hostingEnvironment) 

        { 

            this.operation = new PhysicalFileProvider(); 

            this.operation.RootFolder(this.basePath); 

        } 

 

        public IActionResult OnPostFileOperations([FromBody] FileManagerDirectoryContent args) 

        { 

            string result = ""; 

            var fullPath = this.basePath.Replace('\\', '/') + args.Path; 

            switch (args.Action) 

            { 

                case "read": 

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

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

                    break; 

                case "delete": 

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

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

                    break; 

                case "copy": 

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

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

                    break; 

                case "move": 

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

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

                    break; 

                case "details": 

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

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

                    break; 

                case "create": 

                    // creates a new folder in a given path. 

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

                    break; 

                case "search": 

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

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

                    break; 

                case "rename": 

                    // renames a file or folder. 

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

                    break; 

 

            } 

            return Content(result); 

        } 

        // downloads the selected file(s) and folder(s) 

 

        public IActionResult OnPostDownload(string downloadInput) 

        { 

            FileManagerDirectoryContent args = JsonConvert.DeserializeObject<FileManagerDirectoryContent>(downloadInput); 

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

        } 

 

 

We have attached a sample for your reference, refer to the following link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_FileManager-nonAPI1468825368 

 

Please let us know if any concerns. 

 

Regards, 

Keerthana R. 

[Domenico Carlo]

Thank you!It works if I add [IgnoreAntiforgeryToken] attribute above each action (see the snippet below).

If I remove [IgnoreAntiforgeryToken] from each action, file manager gives the message NetworkError:Failed to send on XMLHTTPResponseFailed to load:. I believe it's an error due to the enabled antiforgery token.

So, how can I invoke actions without using [IgnoreAntiforgeryToken] attribute?

I hope to be clear.

public class AdminController : Controller
{
    ...
    [HttpPost]
    [IgnoreAntiforgeryToken]
    public object FileOperations([FromBody] FileManagerDirectoryContent args)
    {
      ...
    }


    // Processing the Download operation
    [HttpPost]
    [IgnoreAntiforgeryToken]
    public IActionResult Download(string downloadInput)
    {
       ...
    }
}

[Keerthana Rajendran]

Hi Domenico,  

In the previous sample, we have not used IgnoreAntiforgeryToken attribute and still the file operations are working fine. Kindly confirm whether the issue is browser specific else you have any specific settings in your application which might be causing this issue?  

If the issue persists, kindly modify our previous sample to recreate the issue. Meanwhile, refer to the following blogs for more information on this attribute. 

https://docs.microsoft.com/en-us/dotnet/api/microsoft.aspnetcore.mvc.ignoreantiforgerytokenattribute?view=aspnetcore-6.0 

https://stackoverflow.com/questions/59830466/global-anti-forgery-token-validation-issues 

https://stackoverflow.com/questions/56187976/globally-applied-ignoreantiforgerytokenattribute-doesnt-disable-validateantifor 

Regards, 

Keerthana R.