Skip to content

Updated the Ug document for File Manager Component #6797

New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Open
wants to merge 4 commits into
base: development
Choose a base branch
from
Open

Updated the Ug document for File Manager Component #6797

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
4 commits
Select commit Hold shift + click to select a range
46d34c4
984382: Updated the UG document for FileManager
praveensf4999 Oct 1, 2025
f1574b2
984382: Updated the UG document for file manager
praveensf4999 Oct 3, 2025
d1d5466
984382: Updated the UG document for File Manager
praveensf4999 Oct 3, 2025
c0a971c
Merge branch 'development' into 984382-filemanager
praveensf4999 Oct 3, 2025
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
8 changes: 4 additions & 4 deletions blazor/file-manager/File-Transfer-Protocol-file-system-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,17 +7,17 @@ control: File Manager
documentation: ug
---

# File Transfer Protocol file system provider
# File Transfer Protocol (FTP) file system provider

In ASP.NET Core, File Transfer Protocol file system provider allows the users to access to the hosted file system as collection of objects stored in the file storage using File Transfer Protocol. To get started, clone the [EJ2.ASP.NET Core FTP File Provider](https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider) using the following command
In ASP.NET Core, the File Transfer Protocol (FTP) file system provider allows users to access a hosted file system as a collection of objects stored in the file storage using FTP. To get started, clone the [EJ2.ASP.NET Core FTP File Provider](https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider) repository using the following command:

```

git clone https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider.git ej2-ftp-aspcore-file-provider.git

```

After cloning, open the project in Visual Studio and restore the NuGet packages. Now, register File Transfer Protocol details like *hostName*, *userName* and *password* in **SetFTPConnection** method in the File Manager controller to perform the file operations.
After cloning, open the project in Visual Studio and restore the NuGet packages. Register the FTP details, including *hostName*, *userName* and *password* in **SetFTPConnection** method in the File Manager controller to perform the file operations.

```csharp

Expand All @@ -43,7 +43,7 @@ After registering the File Transfer Protocol details, just build and run the pro

```

To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component using the File Transfer Protocol file system provider, you need to initialize the File Transfer Protocol file system provider in the controller.
To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component using the FTP file system provider, initialize the FTP file system provider in the controller.

To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `FTPProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/ftp-aspcore-file-provider/blob/master/Controllers/FTPProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository.

Expand Down
18 changes: 9 additions & 9 deletions blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -7,13 +7,13 @@ control: File Manager
documentation: ug
---

# Firebase file system provider
# Firebase Realtime Database Provider

The [Firebase Real time Database](https://firebase.google.com/) file system provider in **ASP.NET Core** provides the efficient way to store the File Manager file system in a cloud database as JSON representation.
The [Firebase Real time Database](https://firebase.google.com/) file system provider in **ASP.NET Core** provides an efficient way to store the File Manager file system in a cloud database as JSON representation.

### Generate Secret access key from service account
### Generate a Secret Access Key from a Service Account

Follow the given steps to generate the secret access key:
Follow these steps to generate the secret access key:

* Click this [link](https://console.firebase.google.com/u/0/?pli=1) to Firebase console and navigate to the project settings.

Expand All @@ -23,13 +23,13 @@ Follow the given steps to generate the secret access key:

![Blazor File Manager displays File System Authentication](images/blazor-filemanager-file-system.png)

* Now, open the Firebase service project from the Google services console, and generate a Secret key.
* Open the Firebase service project from the Google services console and generate a Secret key.

![Generating Key for Service Project in Blazor FileManager](images/blazor-filemanager-generate-key.png)

* After generating the secret key, replace secret key JSON in the access_key.json file in the Firebase Real time Database provider project to enable authentication for performing read and write operations.

To interpolate with the Firebase Real time Database, create a project under Firebase Real time Database, and then enable the **read** and **write** permissions to access the Firebase Database by specifying the rules within the authentication tab of the Firebase project as demonstrated in the following code snippet.
To interact with the Firebase Realtime Database, create a project and enable **read** and **write** permissions by specifying the rules within the authentication tab of the Firebase project, as shown in the following code snippet.

N> By default, rules of a Firebase project will be **false**. To read and write the data, configure the **Rules** as given in the following code snippet in the *Rules* tab in the Firebase Real time Database project.

Expand Down Expand Up @@ -88,7 +88,7 @@ Then, create a root node and add children to the root node. Refer to the followi

```

Here, the `Files` denotes the `rootNode` and the subsequent object refers to the children of the root node. `rootNode` will be taken as the root folder of the file system loaded which will be loaded in File Manager component.
Here, the `Files` denotes the `rootNode` and the subsequent object refers to the children of the root node. `rootNode` will be taken as the root folder of the file system loaded in the File Manager component.

After that, clone the [EJ2.ASP.NET Core Firebase Real Time Database File Provider](https://github.com/SyncfusionExamples/ej2-firebase-realtime-database-aspcore-file-provider) and just open the project in Visual Studio and restore the NuGet package.

Expand Down Expand Up @@ -116,7 +116,7 @@ In the above code,

* `{give the service account key path}` denotes service account key path which has authentication key for the Firebase Real time Database data.

After configuring the Firebase Real time Database service link, build and run the project. Now, the project will be hosted in `http://localhost:{port}` and just mapping the **ajaxSettings** property of the File Manager component to the appropriate controller methods allows to manage the files in the Firebase Real time Database.
After configuring the Firebase Realtime Database service link, build and run the project. The application will be hosted at `http://localhost:{port}`. Map the **ajaxSettings** property of the File Manager component to the appropriate controller methods to manage the files in the Firebase Realtime Database.

```cshtml

Expand All @@ -135,7 +135,7 @@ After configuring the Firebase Real time Database service link, build and run th

```

To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component using the Firebase file system provider, you need to initialize the Firebase file system provider in the controller.
To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component using the Firebase file system provider, initialize the Firebase file system provider in the controller.

To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `FirebaseProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/firebase-realtime-database-aspcore-file-provider/blob/master/Controllers/FirebaseProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository.

Expand Down
12 changes: 6 additions & 6 deletions blazor/file-manager/Google-Drive-file-system-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: Google Drive provider in Blazor File Manager Component | Syncfusion
title: Google Drive Provider in Blazor File Manager Component | Syncfusion
description: Checkout and learn here all about Google Drive file system provider in Syncfusion Blazor File Manager component and more.
platform: Blazor
control: File Manager
Expand All @@ -9,7 +9,7 @@ documentation: ug

# Google Drive file system provider

The Google Drive file system provider allows the users to manage the files and folders in a Google Drive account. The Google Drive file system provider works on id basis where each file and folder have a unique ID. To get started, clone the [EJ2.ASP.NET Core Google Drive File Provider](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider) using the following command.
The Google Drive file system provider allows users to manage files and folders in a Google Drive account. This provider operates on an ID basis, where each file and folder has a unique ID. To begin, clone the [EJ2.ASP.NET Core Google Drive File Provider](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider) using the following command:

```

Expand All @@ -19,14 +19,14 @@ cd ej2-google-drive-aspcore-file-provider

```

Google Drive file system provider use the [Google Drive APIs](https://developers.google.com/drive/api/v3/reference/) to read the file in the file system and uses the [OAuth 2.0](https://developers.google.com/identity/protocols/OAuth2) protocol for authentication and authorization. To authenticate from the client end, have to obtain OAuth 2.0 client credentials from the `Google API Console`. To learn more about generating the client credentials from the from Google API Console, refer to this [link](https://developers.google.com/identity/protocols/OAuth2UserAgent).
The Google Drive file system provider utilizes the [Google Drive APIs](https://developers.google.com/drive/api/v3/reference/) to read files and folders and employs the [OAuth 2.0](https://developers.google.com/identity/protocols/OAuth2) protocol for authentication and authorization. To authenticate from the client end, OAuth 2.0 client credentials must be obtained from the `Google API Console`. Refer to this [link](https://developers.google.com/identity/protocols/OAuth2UserAgent) for more information on generating client credentials from the Google API Console.

After generating the client secret data, copy the JSON data to the following specified JSON files in the cloned location.

* EJ2FileManagerService > credentials > client_secret.json
* GoogleOAuth2.0Base > credentials > client_secret.json

After updating the credentials, just build and run the project. Now, the project will be hosted in `http://localhost:{port}`, and it will ask to log on to the Gmail account for which created the client secret credentials. Then, provide permission to access the Google Drive files by clicking the allow access button in the page. Now, just mapping the ajaxSettings property of the File Manager component to the appropriate controller methods will allow to manage the files from the Google Drive.
After updating the credentials, build and run the project. The project will be hosted at `http://localhost:{port}` and will prompt a login to the Gmail account for which the client secret credentials were created. Grant permission to access the Google Drive files by clicking the allow access button on the page. Map the `ajaxSettings` property of the File Manager component to the appropriate controller methods to manage the files from Google Drive.

```cshtml

Expand All @@ -44,8 +44,8 @@ After updating the credentials, just build and run the project. Now, the project

```

To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component using the Google Drive file system provider, you need to initialize the Google Drive file system provider in the controller.
To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion Blazor File Manager component using the Google Drive file system provider, initialize the Google Drive file system provider in the controller.

To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `GoogleDriveProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider/blob/master/EJ2GoogleDriveFileProvider/Controllers/GoogleDriveProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository.
To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `GoogleDriveProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/google-drive-aspcore-file-provider/blob/master/EJ2GoogleDriveFileProvider/Controllers/GoogleDriveProviderController.cs). Additionally, all necessary file operation method details for this provider can be found in the same GitHub repository.

N> To learn more about file actions that can be performed with Google drive file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-google-drive-aspcore-file-provider#key-features)
14 changes: 7 additions & 7 deletions blazor/file-manager/SQL-database-file-system-provider.md
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,6 +1,6 @@
---
layout: post
title: SQL database provider in Blazor File Manager Component | Syncfusion
title: SQL Database Provider in Blazor File Manager Component | Syncfusion
description: Checkout and learn here all about SQL database file system provider in Syncfusion Blazor File Manager component and more.
platform: Blazor
control: File Manager
Expand All @@ -9,23 +9,23 @@ documentation: ug

# SQL database file system provider

The SQL database file system provider allows the users to manage the file system being maintained in a SQL database table. Unlike the other file system providers, the SQL database file system provider works on ID basis. Here, each file and folder have a unique ID based on which all the file operations will be performed. To get started, clone the [EJ2.ASP.NET Core SQL Server Database File Provider](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider) using the following command.
The SQL database file system provider allows users to manage a file system maintained in a SQL database table. Unlike other file system providers, this provider operates on an ID basis, where each file and folder has a unique ID used for all file operations. To begin, clone the [EJ2.ASP.NET Core SQL Server Database File Provider](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider) using the following command:

```json

<add name="FileExplorerConnection" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\FileManager.mdf;Integrated Security=True;Trusted_Connection=true" />

```

After cloning, just open the project in Visual Studio and restore the NuGet packages. To establish the SQL server connection with the database file (for eg: FileManager.mdf), you need to specify the connection string in the web config file as shown below.
After cloning, open the project in Visual Studio and restore the NuGet packages. To establish the SQL server connection with the database file (e.g., FileManager.mdf), specify the connection string in the `web.config` file as follows:

```json

<add name="FileExplorerConnection" connectionString="Data Source=(LocalDB)\v11.0;AttachDbFilename=|DataDirectory|\FileManager.mdf;Integrated Security=True;Trusted_Connection=true" />

```

Then, make an entry for the connection string in `appsettings.json` file as shown below.
Then, add an entry for the connection string in `appsettings.json` file as shown below.

```json

Expand All @@ -35,7 +35,7 @@ Then, make an entry for the connection string in `appsettings.json` file as show

```

Now, to configure the database connection, you need to set the connection name, table name and root folder ID value by passing these values to the SetSQLConnection method.
To configure the database connection, set the connection name, table name, and root folder ID by passing these values to the `SetSQLConnection` method:

```csharp

Expand Down Expand Up @@ -63,8 +63,8 @@ After configuring the connection, just build and run the project. Now, the proje

```

To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component using the SQL database file system provider, you need to initialize the SQL database file system provider in the controller.
To perform file operations (Read, Create, Rename, Delete, Get file details, Search, Copy, Move, Upload, Download, GetImage) in the Syncfusion<sup style="font-size:70%">&reg;</sup> Blazor File Manager component using the SQL database file system provider, initialize the SQL database file system provider in the controller.

To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `SQLProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider/blob/master/Controllers/SQLProviderController.cs). Additionally, you can check out all the necessary file operation method details for this provider in the same GitHub repository.
To initialize a local service with the above-mentioned file operations, create a new folder named `Controllers` inside the server part of the project. Then, create a new file with the extension `.cs` inside the Controllers folder and add the necessary file operations code available in the `SQLProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider/blob/master/Controllers/SQLProviderController.cs). Additionally, all necessary file operation method details for this provider can be found in the same GitHub repository.

N> To learn more about file actions that can be performed with SQL database file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-sql-server-database-aspcore-file-provider#key-features)
Loading