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. (Last updated on: June 24, 2019).
Unfortunately, activation email could not send to your email. Please try again.
Syncfusion Feedback

FileManager Example

Thread ID:

Created:

Updated:

Platform:

Replies:

143925 Apr 10,2019 06:25 PM UTC Jun 13,2019 01:19 PM UTC ASP.NET Core - EJ 2 11
loading
Tags: FileManager
Yoab Youssoufou
Asked On April 10, 2019 06:25 PM UTC

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 [Syncfusion]
Replied On April 11, 2019 01:02 PM UTC

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 


Yoab Youssoufou
Replied On April 11, 2019 02:18 PM UTC

Excellent! Thank you

Christopher Issac Sunder K [Syncfusion]
Replied On April 12, 2019 10:24 AM UTC

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
Replied On April 29, 2019 02:07 PM UTC

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 [Syncfusion]
Replied On April 30, 2019 02:15 PM UTC

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
Replied On May 2, 2019 10:47 AM UTC

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

Christopher Issac Sunder K [Syncfusion]
Replied On May 3, 2019 12:44 PM UTC

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 


Yoab Youssoufou
Replied On May 8, 2019 11:36 AM UTC

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 [Syncfusion]
Replied On May 9, 2019 09:31 AM UTC

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 


Pat Sullivan
Replied On June 12, 2019 07:39 PM UTC

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

Christopher Issac Sunder K [Syncfusion]
Replied On June 13, 2019 01:19 PM UTC

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 


CONFIRMATION

This post will be permanently deleted. Are you sure you want to continue?

Sorry, An error occured while processing your request. Please try again later.

Please sign in to access our forum

This page will automatically be redirected to the sign-in page in 10 seconds.

Warning Icon You are using an outdated version of Internet Explorer that may not display all features of this and other websites. Upgrade to Internet Explorer 8 or newer for a better experience.Close Icon

Live Chat Icon For mobile
Live Chat Icon