Set path and selectedItems properties when init FileManager in DialogComponent

[Bui duc Anh]

Hi support,

In this demo, could you please tell me how can I set path and selectedItems properties when DialogComponent open?

https://ej2.syncfusion.com/react/demos/#/material/file-manager/file-upload

Thanks a lot

[Sowmiya Padmanaban]

Hi Bui,  

 

Greetings from Syncfusion support. 

 

We have checked your reported query with FileManager component. Yes, you can path and select items in FileManager using path and selectedItems properties  in the dialogOpen of Dialog component and success event of FileManager component. 

 

When files/folders loaded in view element of FileManager, success event will be triggered in FileManager component. Using this event, you can check the condition for the corresponding path and set the SelectedItems to the FileManager component. 

 

Refer the below code snippet. 

  dialogOpen() { 

        this.newPath ="/Pictures"; 

        this.isDialogOpen=true; 

        // Change the path of the FileManager component. 

        this.filemanagerObj.path="/Pictures/"; 

        //Bind the path property imeediately to the FileManager component. 

        this.filemanagerObj.dataBind(); 

        document.getElementById('uploadFileManager').style.display = 'none'; 

    } 

 btnClick() { 

        this.dialogObj.show(); 

        this.filemanagerObj.refreshLayout(); 

    } 

  success(args) { 

      // Chcek the condition if the dialog is opened and path of the fileManager component is equal to the 

      // argument path, if it is equal , select the item inside the corressponding path. 

        let parentPath = ((args.result).cwd.filterPath) +((args.result).cwd.name); 

          parentPath=parentPath.replace(/\\/g, '/'); 

              if((this.newPath === parentPath)&& this.isDialogOpen){ 

              this.filemanagerObj.selectedItems =["Employees"]; 

              this.isDialogOpen=false; 

        } 

    } 

Refer the below sample link: 

 

https://stackblitz.com/edit/react-uqtfit?file=index.css 

 

To know more about the FileManager component, refer the below link. 

 

UG Documentation-https://ej2.syncfusion.com/react/documentation/file-manager/customization/ 

 

Demo link-https://ej2.syncfusion.com/react/demos/#/material/file-manager/file-upload 

 

API reference-https://ej2.syncfusion.com/react/documentation/api/file-manager/ 

 

Please let us know, if you need any further assistance. 

 

Regards,  

Sowmiya.P