Setting path setting to a local location

[William]

I have the following:

     var hostUrl = 'https://ej2services.syncfusion.com/production/web-services/';

     var filemanagerInstance = new ej.filemanager.FileManager({

          ajaxSettings: {

               url: hostUrl + 'api/FileManager/FileOperations'

          },

          view: "Details",

          allowDragAndDrop: true,

          path: "z:\\myfolder1\\myfolder2\\myfinalfolder"

     });

However, it seems it's still using the default folder path (D:\home\site\production\web-services-1-10-19\wwwroot\Files) and adding path to the end of it, causing the following error:
     The given path's format is not supported.

How do I completely negate the default folder path, and just use my own local file path?

[Keerthana Rajendran]

Hi William,  

 

Good day to you. 

 

We have checked your reported query that setting local path for file manager component. We sorted out the issue, the path of the file manager is not properly initialized. In our documentation, we are using the online service link for file manager component. If you want to change the root path of the file manager component, we suggestd you to use the local service for file manager component. The root path of the file manager component is set by the server side. 

 

Refer the below code snippet to set the root path. File location  

 

Controller/FileManagerController.cs 

        public PhysicalFileProvider operation; 

        public string basePath; 

        string root = "D:\\support\\controller"; 

        public FileManagerController(IHostingEnvironment hostingEnvironment) 

        { 

            // Map the path of the files to be accessed with the host 

            this.basePath = hostingEnvironment.ContentRootPath; 

            this.operation = new PhysicalFileProvider(); 

            // Assign the mapped path as root folder 

            this.operation.RootFolder(this.root); 

        } 

       

 

For your reference, we have attached a local service for file manager component. In that service, you have to change the root path of file manager component. 

 

Refer the Local service link:  https://www.syncfusion.com/downloads/support/directtrac/general/ze/core_controller1552061214.zip 

 

Download the attached sample and run the service. After running the local service, the service is launched in the specific localhost URL. Refer that local host URL in your file manager sample.  

 

Refer the below code snippet for specifying the local host URL. 

 

var hostUrl = 'http://localhost:62869/'; 

    var fileObject = new ej.filemanager.FileManager({ 

            ajaxSettings: { 

                url: hostUrl + 'api/FileManager/FileOperations', 

                getImageUrl: hostUrl + 'api/FileManager/GetImage', 

                uploadUrl: hostUrl + 'api/FileManager/Upload', 

                downloadUrl: hostUrl + 'api/FileManager/Download'     

            }, 

      view: 'Details' 

    }); 

    fileObject.appendTo('#filemanager'); 

 

For your reference, we have prepared a sample. After running the file manager local service, refer the service URL in below file manager sample. 

 

Sample link: https://stackblitz.com/edit/cyp4g2?file=index.js 

 

 

In your sample, you have using path API. The current path of the File Manager can be specified initially or dynamically using the path property.  If you want to initialize the file manager component in specific folder location, you case use the path property. 

 

Sample link: https://stackblitz.com/edit/cyp4g2-2yyxvy?file=index.js 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana.

[William]

Thanks for the reply, Keerthana.  Where do I find the local service and is there a getting started page for that?

[Keerthana Rajendran]

Hi William,   

 

We have checked your reported query for documentation link for file manager component using local service. Refer the below documentation link for local file manager service. 

 

https://ej2.syncfusion.com/documentation/file-manager/file-system-provider/ 

 

Please let us know, if you have any concerns. 

 

Regards, 

Keerthana

[William]

Hi Keerthana,

I did as the tutorial says and ended up with:

     var hostUrl = 'http://localhost:12345/';

     var filemanagerInstance = new ej.filemanager.FileManager({

          ajaxSettings: {

               url: hostUrl + 'api/FileManager/FileOperations',

               getImageUrl: hostUrl + 'api/FileManager/GetImage',

               uploadUrl: hostUrl + 'api/FileManager/Upload',

               downloadUrl: hostUrl + 'api/FileManager/Download'

          },

          view: "Details",

          allowDragAndDrop: true

     });

However, I get the following error: 

     NetworkError: Failed to send on XMLHTTPRequest: Failed to load http://localhost:12345/api/FileManager/FileOperations

I tried removing the api/ from api/FileManager/FileOperations like it has in the tutorial but I still get the same error.

Thanks,
William

P.S.  I use MVC5, not core

[William]

I found out localhost:12345 is being blocked by CORS policy.  Is there anyway I could download localhost:12345/FileManager/FileOperations and the rest so I don't have to reference them by the localhost:12345 url?

[Keerthana Rajendran]

Hi William, 

 

 

Sorry for the inconvenience. 

 

 

We have checked your reported error. By default, the reported error occurs when the browser blocks the request from different domains. In that case, we suggest you to enable the access-control-allow-origin in file manager service server side.  

 

 

Refer the below code snippet in Web.config file. In this code, enable the CORS in your file manager service. 

 

<system.webServer> 

    <httpProtocol> 

      <customHeaders> 

        <add name="Access-Control-Allow-Origin" value="*" /> 

        <add name="Access-Control-Allow-Headers" value="Content-Type" /> 

        <add name="Access-Control-Allow-Methods" value="GET, POST, PUT, DELETE, OPTIONS" /> 

      </customHeaders> 

    </httpProtocol> 

</system.webServer> 

 

After adding this code in your local service. Run the service and refer the local host URL in below file manager sample. 

 

Sample: https://stackblitz.com/edit/cyp4g2-2yyxvy?file=index.js 

 

 

We will add these changes in our documentation and refresh it in our upcoming release. 

 

 

Please let us know, if you have any concerns. 

 

 

Regards, 

Keerthana. 

[William]

Thank you so much for helping through this process.  Everything seems to be working now.

[Keerthana Rajendran]

Hi William,  

 

Most welcome. We are glad to hear that the issue has been resolved.  Please get back to us if you need further assistance on this. 

 

Regards, 

Keerthana. 

[Aman kumar]

can you pls help me i am getting same error in asp.net core after implement file manager in rich text editor .

[Vinitha Jeyakumar]

Hi Aman,

Please refer to the below documentation and demos to use File Browser with Rich Text Editor control.

Documentation: https://ej2.syncfusion.com/aspnetcore/documentation/rich-text-editor/file-browser

Demos: https://ej2.syncfusion.com/aspnetcore/RichTextEditor/FileBrowser#/material

If still you are facing an issue, please provide us with the replication details and sample to further validate on our end.

Regards,

Vinitha

[Aman kumar]

Hi I am trying to deploy same approach but i am getting some error . i am using .net core.

[Vinitha Jeyakumar]

Hi Aman,

We have prepared a sample using file browser tools with Rich Text Editor in .NET Core. please check the sample below,

Sample: https://www.syncfusion.com/downloads/support/directtrac/general/ze/Core_new_app-1506725392

Please provide us with the below details,

• Your package version,
• Exact issue reproducing steps.
• Issue replicating entire code snippet.
• If possible, please provide us with the issue reproducing runnable sample.

Regards,

Vinitha