Allow a custom Root-Directory

Question

Good Day,I'm Currently trying to use the File Manager Component in my Nuxt-App.My use-case would however require to show each User a different user-specific Root Directory based on some parameters.Say I have a structure like this:C:/Projects/ - user1   - user1-project1   - user1-project2 - user2   - user2-project1   - user2-project2Currently the Node Server is configured to serve C:\Projects\, so each User will see all Directories spanning out from this root.I can set the Path of the component for User-1 to "/user1", so the component will initialize in this folder, however, this user will still see the Parent-Folder Projects

and all its sub-directories.If I however set the Path of the Component to \user1 (notice the backslash), the Component will show C:/Projects/user1 as root, and show no Parent.But then, the navigation will not work anymore. If I now try to open the user1-project1 Directory, the Component will not be able to find the Directory, since it tries to access C:/Projects/user1-project1 ​, instead of ​
C:/Projects/user1/user1-project1

(notice how `user1` was omitted).Would it be possible to have such a feature included, so that I either can: set a custom user-specific root in some sub-directory of the actual server-side rootuse the backslash-notation, as mentioned above, where the root is correctly set on client side, but the component doesn't work anymoreOn another note:The 19.2.xx Versions of File-Manager are currently not compatible with Nuxt2, which uses Vue2. hence I currently have to use 19.1.xx. Is this intended behavior?

Indhumathy Loganathan · Accepted Answer

Hi Tim, 
 
Greetings from Syncfusion support. 
 
We have validated your reported query in File Manager component. We understood that you want to show user-specific root directory based on some parameters. We can pass the additional parameter from client-side to the server-side controller methods using client-side events of File Manager component.   
   
For your reference, we have prepared a sample. In this sample, we have passed the customer parameter (user_name) to the controller side and change the root folder of the File Manager component based on this argument.   
   
Refer the below code snippet to pass the custom parameter. You can use the beforeSend event to send the custom data to the server-side API method for Create, Read, Rename, Delete, Details, Search, Copy, Move File Manager actions. You can also pass the custom parameter for Download , Upload and GetImage operations.  
  
Read and Upload operations:  




beforeSend: function (args) { 
  var data = JSON.parse(args.ajaxSettings.data); 
  // Add custom parameter column 
  data["user_name"] = "user1\user1-project1"; 
  // Add custom parameter in ajax settings 
  args.ajaxSettings.data = JSON.stringify(data); 
}, 
 
GetImage operations:  




beforeImageLoad: function (args) { 
  // Add custom parameter in image URL 
  args.imageUrl = args.imageUrl + "&user_name=" + "user1\user1-project1"; 
}, 
  
Download operations:  




beforeDownload: function (args) { 
  // Assign your preferred root file name to the below variable and don't change other lines 
  var value = "user1\user1-project1"; 
  var includeCustomAttribute = args.data; 
  includeCustomAttribute.user_name = value; 
  args.data = includeCustomAttribute; 
}, 
  
Now, specify the root folder in controller based on the custom parameter.  
  




//set constant root path here  
const root = "D:/Projects/";  
  
var contentRootPath = "";  
...  
//Handles the GetImage request  
app.get('/GetImage', function (req, res) {  
    //Set the location here  
    contentRootPath = root + req.query.user_name;  
    ...  
//Handles the Upload request  
app.post('/Upload', multer(multerConfig).any('uploadFiles'), function (req, res) {  
    //Set the location here  
    var location = JSON.parse(req.body.data).name;  
    contentRootPath = root + location;  
    ...  
//Handles the Download request  
app.post('/Download', function (req, res) {  
    //Set the location here  
    var location = JSON.parse(req.body.downloadInput).user_name;  
    ...  
//Handles the read request  
app.post('/', function (req, res) {  
    //Set the location here  
    contentRootPath = root + req.body.user_name;  
  
We have mentioned the root path as a variable, to switch the root folder inside all file operations. If you pass the proper path value, then the component will work as expected. Similar to the above way, you can pass your custom parameter based on the active user from client to server to switch the root folders. You can find the sample from below link.  
  
Sample: https://www.syncfusion.com/downloads/support/forum/167901/ze/vuesample-1042648362 
  
Service provider: https://www.syncfusion.com/downloads/support/forum/167901/ze/node-filesystem-provider-33828145 
 
Also, the issue with package upgrade in Vue NuxtJS sample had already been considered as a bug and the fix for this issue will be included in our upcoming Volume 2, 2021 SP1 release which is expected to be rolled out by the mid of August 2021. 
 
You can track the status through the below link. 
 
https://www.syncfusion.com/feedback/27498/issue-in-vue-umd-file-while-upgrading-19-2 
 
We appreciate your patience for this release and get back to us if you need any further assistance. 
 
Regards, 
Indhumathy L