File Manager set root path and allowed file extensions for upload ?

[Ben Junior]

Using latest version of Syncfusion, VS2019 and AspNetCore 5 as of 5/17/2021,  on  a Blazor FileManager control,  I would like to know how to change the root path at runtime and how to set the allowed extensions for upload. I am using yours sample app:

// THIS DOESN'T WORK

 <SfFileManager TValue="FileManagerDirectoryContent"  RootAliasName="\\wwwroot\\Client">// 

// THIS DOESN'T WORK EITHER

 <SfFileManager TValue="FileManagerDirectoryContent"  Path="\\wwwroot\\Client">

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

    public class FileManagerController : Controller

    {

        public PhysicalFileProvider operation;

        public string basePath;

        string root = "wwwroot\\Files";

        [Obsolete]

        public FileManagerController(IHostingEnvironment hostingEnvironment)

        {

            this.basePath = hostingEnvironment.ContentRootPath;

            this.operation = new PhysicalFileProvider();

            this.operation.RootFolder(this.basePath + "\\" + this.root); // Data\Files denotes in which files and folders are available.

        }

[Indhumathy Loganathan]

Hi Ben, 

 

Greetings from Syncfusion support. 

 

We have validated your requirement in File Manager component. Please find the answer for your queries. 

 

Query 1: How to change the root path 

 

The RootAliasName property is used to rename the original root name and the Path property navigates to the sub-folders(that are already rendered) inside the root folder. Please check the below code snippet for reference. 

 

<SfFileManager TValue="FileManagerDirectoryContent" RootAliasName="Root" Path="/Documents/"> 

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

                             UploadUrl="/api/FileManager/Upload" 

                             DownloadUrl="/api/FileManager/Download" 

                              GetImageUrl="/api/FileManager/GetImage"> 

    </FileManagerAjaxSettings> 

</SfFileManager> 

 

Refer to the below screenshot. 

 

 

 

You cannot switch the root folder from client side but you can set the root folder for File Manager component in sever side. So, we suggest you to change the root folder based on the user. Please refer to the below code snippet. 

 

public class FileManagerController : Controller 

{ 

    public string user = "user1"; 

    ... 

    public FileManagerController(IHostingEnvironment hostingEnvironment) 

    { 

        this.basePath = hostingEnvironment.ContentRootPath; 

        this.operation = new PhysicalFileProvider(); 

        if(user == "user1") 

        { 

            // Returns the folders from Root1 

            this.operation.RootFolder(this.basePath + \\wwwroot\\Files\\Root1); 

        } 

        else 

        { 

            // Returns the folders from Root2 

            this.operation.RootFolder(this.basePath + \\wwwroot\\Files\\Root2); 

        } 

    } 

 

Query 2: How to set the allowed extensions for upload 

 

In File Manager, we have AllowedExtensions property in FileManagerUploadSettings which specifies the extensions of the file types to be allowed in the File Manager component and pass the extensions with comma separators as done in the below code snippet. 

 

<SfFileManager TValue="FileManagerDirectoryContent"> 

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

                             UploadUrl="/api/FileManager/Upload" 

                             DownloadUrl="/api/FileManager/Download" 

                              GetImageUrl="/api/FileManager/GetImage"> 

    </FileManagerAjaxSettings> 

    <FileManagerUploadSettings AllowedExtensions=".jpg,.png"></FileManagerUploadSettings> 

</SfFileManager> 

 

You can find the sample demonstrating the solution from below link. 

 

https://www.syncfusion.com/downloads/support/directtrac/general/ze/BlazorSample-1698845918 

 

Please let us know if you need any further assistance. 

 

Regards, 

Indhumathy L 

[Ben Junior]

It is working now. Thanks for the solution. The only question that I have is how to change/retrieve  the value of  the user property at runtime?

public class FileManagerController : Controller 

{ 

    public string user = "user1"; 

    ... 

    public FileManagerController(IHostingEnvironment hostingEnvironment) 

    { 

        this.basePath = hostingEnvironment.ContentRootPath; 

        this.operation = new PhysicalFileProvider(); 

        if(user == "user1") 

        { 

            // Returns the folders from Root1 

            this.operation.RootFolder(this.basePath + \\wwwroot\\Files\\Root1); 

        } 

        else 

        { 

            // Returns the folders from Root2 

            this.operation.RootFolder(this.basePath + \\wwwroot\\Files\\Root2); 

        } 

    } 

[Indhumathy Loganathan]

Hi Ben, 

 

We checked your requirement to dynamically update the user values. We are preparing a Blazor File Manager server sample with physical file provider in such a way, where you can select user options from a dropdown list and based on the selected user you can dynamically update the root folder of File Manager. For example, if you select “user1” in dropdown list, then the FileManager shows only the folders and files of that particular user by updating the root folder. Meanwhile, we would like to confirm this from your end whether this is your exact requirement to proceed further with the sample. If we have misunderstood, kindly share us your exact use case scenario to serve you better.  

 

Please revert us with the above details to assist you promptly. 

 

Regards, 

Indhumathy L 

[Ben Junior]

Hi Indhumathy L

I was about to update this thread when I read your message. Thanks so much but I don't need anything else at this time. You already answered all my issues.

In case you have the time and want to read further, following is my scenario and the solution:

 I have a Client folder with 2 subfolders but I can only set the root path up to the client,  thus allowing the user to change the designated subfolder at runtime and selecting from the wrong subfolder. Since for now, it is not possible to add the subfolder to the root path at runtime I found another way to do it, by comparing the path of the selected item with the previously assigned SubFolder and preventing selection if they are different:

  <SfFileManager .... Path=@SubFolder>

          <FileManagerEvents .... OnMenuClick="OnMenuClick"/>

   // event for custom menu item

    void OnMenuClick(MenuClickEventArgs<FileManagerDirectoryContent> args)

    {

        if (args.Item.Text == "Select")

        {

            //Get the currently selected file name

            SelectedItem = args.FileDetails[0].FilterPath;

            string temp1 = SelectedItem.Replace("\\", "").Replace("\"", "").Replace(" ", "");

            string temp2 = SubFolder.Replace("\\", "").Replace("\"", "").Replace("/", "").Replace(" ", "");

            if (temp1 == temp2)

            {

                SelectedItem = SelectedItem + args.FileDetails[0].Name;

                CallBackEvent_OnSaveSelection.InvokeAsync(SelectedItem);

            }

            else

            {

                canSelect = false;

            }

        }

    }

[Keerthana Rajendran]

Hi Ben, 

Most welcome. We are glad to hear that the issue has been resolved. Please get back to us if you need further assistance. We will be happy to assist you. 

Regards, 

Keerthana.