We use cookies to give you the best experience on our website. If you continue to browse, then you agree to our privacy policy and cookie policy. Image for the cookie policy date

FileManager Example

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

11 Replies

CI Christopher Issac Sunder K Syncfusion Team April 11, 2019 05:02 AM

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: 

  • Using external local service:
We have committed the File Manager service in the following github location, 
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: 

  • 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 



YY Yoab Youssoufou April 11, 2019 06:18 AM

Excellent! Thank you


CI Christopher Issac Sunder K Syncfusion Team April 12, 2019 02:24 AM

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 



YY Yoab Youssoufou April 29, 2019 06:07 AM

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?


CI Christopher Issac Sunder K Syncfusion Team April 30, 2019 06:15 AM

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 



YY Yoab Youssoufou May 2, 2019 02:47 AM

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


CI Christopher Issac Sunder K Syncfusion Team May 3, 2019 04:44 AM

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, 


Let us know if you have any concerns. 

Thanks, 
Christo 



YY Yoab Youssoufou May 8, 2019 03:36 AM

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


CI Christopher Issac Sunder K Syncfusion Team May 9, 2019 01:31 AM

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, 

Let us know if you have any concerns. 

Thanks,
Christo 



PS Pat Sullivan June 12, 2019 11:39 AM

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


CI Christopher Issac Sunder K Syncfusion Team June 13, 2019 05:19 AM

Hi Pat, 

We are not sure of which sample you require for File Manager in MVC platform. So please find the below samples, 
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 


Loader.
Live Chat Icon For mobile
Up arrow icon