FileManager Example

[Yoab Youssoufou]

Hello,

I see that FileManager on ej2 dotnet core platform is still in preview mode can we have a functional example working locally? how do I adapt the fileOperations locally instead of using remote URL https://ng2jq.syncfusion.com/ej2services/api/FileManager/FileOperations.

Thankls in advance

[Christopher Issac Sunder K]

Hi Yoab, 

We checked your query – “Using local service to run File Manager”. You can achieve this by any of the following methods, 

• Using local service within the application:

You need to add fileoperations in the controller and it’s provider base in the FileManagerProviderBase model within the File Manager application to access it locally. You can reference this service in the ajax-settings as like given in below code snippet, 

<ejs-filemanager id="file" height="500px"> 

    <e-filemanager-ajaxsettings url="/Home/FileOperations" uploadUrl="/Home/Upload" downloadUrl="/Home/Download" getImageUrl="/Home/GetImage"></e-filemanager-ajaxsettings> 

</ejs-filemanager> 

We have prepared a sample for your reference. Please find it below, 

           Sample: 

           http://www.syncfusion.com/downloads/support/forum/143925/ze/EssentialJS2WebApplication11454195470 

• Using external local service:

We have committed the File Manager service in the following github location, 

File Manager service: https://github.com/SyncfusionExamples/ej2-file-manager-core-service  

You can run this service and refer that url in the ajax-settings for running the File Manager. You can reference this service in the ajax-settings as like given in below code snippet, 

<ejs-filemanager id="file" height="500px"> 

    <e-filemanager-ajaxsettings url="http://localhost:62869/api/FileManager/FileOperations" uploadUrl="http://localhost:62869/api/FileManager/Upload" downloadUrl="http://localhost:62869/api/FileManager/Download" getImageUrl="http://localhost:62869/api/FileManager/GetImage"></e-filemanager-ajaxsettings> 

</ejs-filemanager> 

We have prepared a sample for your reference. Please find it below, 

           Sample: 

           http://www.syncfusion.com/downloads/support/forum/143925/ze/Seperate_service1670884653  

• Using local service and syncfusion assembly within the application:

We will include the FileManagerProviderBase in the Syncfusion assembly package in our upcoming 2019 Volume 1 Service Pack 1 release which is expected to be rolled out in the end of April, 2019. After this, you can include just the fileoperations in the controller part for running the File Manager using local service. 

For all the above methods the path you wish to access can be provided in the controller part as like given below, 

string root = "wwwroot\\files"; 

//Here we have accessed shared path within the application. You can change it to the path which you need to access 

this.operation = new FileManagerProviderBase(this.basePath + "\\" + this.root); 

Let us know if you have any concerns on this. 

Thanks,
Christo 

[Yoab Youssoufou]

Excellent! Thank you

[Christopher Issac Sunder K]

Hi Yoab, 

Most welcome, hope your issue is resolved J 

Please get back to us if you require further assistance on this query. 

Thanks,
Christo 

[Yoab Youssoufou]

Hello this example works well but what if I want the default initial folder to be dynamically generated? I have tried but it doesn't work. for example imagine I have just created a new user called XYZ and i want the filemanger to initiate to default folder "wwwroot\\files\\XYZ\\" I do not know ahead of time the value of "XYZ"

How can I achieve that?

[Christopher Issac Sunder K]

Hi Yoab, 

We checked your query - “To dynamically change the default folder in File Manager“. Due to security reasons, we have provided the root path for File Manager in the service itself so that it cannot be manipulated. If you need to change the root folder, you need to modify it in the service initially. The root folder cannot be changed dynamically. However, you can use the selectedItems property to select the new user you have created which navigates to the path of the new user. 

Please let us know if you have any concerns. 

Thanks,
Christo 

[Yoab Youssoufou]

please can i have an example with selectedItems i have not been able to get it to work

[Christopher Issac Sunder K]

Hi Yoab, 

There are two methods. You can select file/folder in the File Manager’s layout and/or select a folder in the File Manager’s left side navigation pane(Treeview). Both of these can be achieved using following steps, 

Select a file/folder in the File Manager layout: 

The File Manager’s selectedItems API helps select a file or folder in the File Manager layout. You can use this if you need to select a file or folder in the layout. Please check below code snippet to achieve this, 

@{ 

    // Name of the file/folder to be selected 

    string[] selectedItems = { "Bread.png" }; 

} 

<ejs-filemanager id="file" height="500px" selectedItems="selectedItems"> 

    <e-filemanager-ajaxsettings url="/Home/FileOperations" uploadUrl="/Home/Upload" downloadUrl="/Home/Download" getImageUrl="/Home/GetImage"></e-filemanager-ajaxsettings> 

</ejs-filemanager> 

Select a folder from the File Manager’s left side navigation pane: 

Similarly, path API helps select a folder present in the left side navigation pane of the File Manager (treeview). You can use this if you need to select a folder in the treeview. Please check below code snippet to achieve this, 

// Provide the path of the folder which needs to be selected in the treeview 

<ejs-filemanager id="file" path="/Food" height="500px"> 

    <e-filemanager-ajaxsettings url="/Home/FileOperations" uploadUrl="/Home/Upload" downloadUrl="/Home/Download" getImageUrl="/Home/GetImage"></e-filemanager-ajaxsettings> 

</ejs-filemanager> 

We have prepared a sample for your reference. In this sample, we have used path API to select “Food” folder in the Treeview and selectedItems API to select “Bread.png” file from the selected folder “Food”. Please find the sample below, 

Sample: http://www.syncfusion.com/downloads/support/forum/143925/ze/Selected_items1310291023  

Let us know if you have any concerns. 

Thanks, 

Christo 

[Yoab Youssoufou]

Thank you, "/path"  does  allow selecting folder as desired this is great. Another issue now is that how can I make the selected folder the only folder available? For example in your example if path="/Food"  

how can i prevent navigation to other folders? i want the person to start at "/Food" and not navigate away from it

[Christopher Issac Sunder K]

Hi Yoab, 

We checked your query – “To prevent navigation for all folders except the one specified in path API”. You can achieve this requirement by setting pointer-events to none to the folders you wish to disable the navigation. Also you can prevent opening of folders that are available in the selected path by cancelling it in beforeFileopen event of the File Manager. 

We have prepared a sample for your reference. In this sample, we are adding a class named “disable” to the elements and setting pointer-events as none based on this class.  

Initially we have added disable class to the breadcrumb bar(Helps navigating to parent folders) of the File Manager in the created event. 

//File Manager’s created event 

function onCreated(args) { 

    // Adding disable class to the breadcrumb bar 

    document.getElementById("file").querySelector(".e-address").classList.add('disable'); 

} 

<style> 

    /* Setting pointer-events to none for the breadcrumb bar*/ 

    .disable > .e-addressbar-ul { 

        pointer-events: none; 

    } 

</style> 

Then, we have added “disable” class in beforeFileLoad event to all the nodes available in the NavigationPane except the current path. In the styles, we have disabled the pointer events for the nodes and it’s icon(To prevent expand and collapse). 

// File Manager’s beforeFileLoad event 

function beforeFileLoad(args) { 

    // Checking the module and folder nams 

    if (args.module === "navigationpane" && args.fileDetails.name !== "Food") { 

        // Adding disable class to the node if it is not the current path 

        args.element.classList.add('disable'); 

    } 

} 

<style> 

    /* Setting pointer-events to none for the nodes*/ 

    .disable > .e-fullrow { 

        pointer-events: none; 

    } 

 

        /* Setting pointer-events to none for the node icons*/ 

    .disable > .e-icon-wrapper > .e-icons { 

        pointer-events: none; 

    } 

</style> 

Finally, we have prevented navigating to folders present within the current path by cancelling it in beforeFileopen event of the File Manager. 

// File Manager’s beforeFileOpen event 

function beforeFileOpen(args) { 

    // Checked if it is file or folder 

    if (!args.fileDetails.isFile) { 

        // Cancelled the event 

        args.cancel = true 

    } 

} 

Please find the sample below, 

Sample: http://www.syncfusion.com/downloads/support/forum/143925/ze/Selected_items1-853643139  

Let us know if you have any concerns. 

Thanks,
Christo 

[Pat Sullivan]

Do you have/can you provide a sample for asp.net mvc as well (not core)?

[Christopher Issac Sunder K]

Hi Pat, 

We are not sure of which sample you require for File Manager in MVC platform. So please find the below samples, 

Local service access in the File manager: http://www.syncfusion.com/downloads/support/forum/143925/ze/Filemanager1305793138 

Prevent navigation for all folders except the one specified in path API: http://www.syncfusion.com/downloads/support/forum/143925/ze/Folder_navigation_prevent483371274 

If this is not the sample you are looking for, please get back to us with the details so that we can check it and help you further. 

Thanks, 

Christo