diff --git a/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md b/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md index b406e9205f..e0685f3aef 100644 --- a/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md +++ b/blazor/file-manager/File-Transfer-Protocol-file-system-provider.md @@ -7,9 +7,9 @@ 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: ``` @@ -17,7 +17,7 @@ git clone https://github.com/SyncfusionExamples/ej2-ftp-aspcore-file-provider.gi ``` -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 @@ -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® 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® 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. diff --git a/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md b/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md index e66b045681..36f3aed9ce 100644 --- a/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md +++ b/blazor/file-manager/Firebase-Real-time-Database-file-system-provider.md @@ -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. @@ -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. @@ -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. @@ -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 @@ -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® 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® 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. diff --git a/blazor/file-manager/Google-Drive-file-system-provider.md b/blazor/file-manager/Google-Drive-file-system-provider.md index 55fc6e0154..39f80f1cba 100644 --- a/blazor/file-manager/Google-Drive-file-system-provider.md +++ b/blazor/file-manager/Google-Drive-file-system-provider.md @@ -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 @@ -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: ``` @@ -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 @@ -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® 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) \ No newline at end of file diff --git a/blazor/file-manager/SQL-database-file-system-provider.md b/blazor/file-manager/SQL-database-file-system-provider.md index 7d04a66009..6ac878954a 100644 --- a/blazor/file-manager/SQL-database-file-system-provider.md +++ b/blazor/file-manager/SQL-database-file-system-provider.md @@ -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 @@ -9,7 +9,7 @@ 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 @@ -17,7 +17,7 @@ The SQL database file system provider allows the users to manage the file system ``` -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 @@ -25,7 +25,7 @@ After cloning, just open the project in Visual Studio and restore the NuGet pack ``` -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 @@ -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 @@ -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® 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® 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) \ No newline at end of file diff --git a/blazor/file-manager/drag-and-drop.md b/blazor/file-manager/drag-and-drop.md index bb7b7d6c0e..221ca9627b 100644 --- a/blazor/file-manager/drag-and-drop.md +++ b/blazor/file-manager/drag-and-drop.md @@ -9,9 +9,9 @@ documentation: ug # Drag and Drop in Blazor File Manager Component -The File Manager allows files and folders to be moved within the file system by drag and dropping them. This support can be enabled or disabled using the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowDragAndDrop) property of the File Manager. +The File Manager allows files and folders to be moved within the file system by drag-and-drop operations. This feature can be enabled or disabled using the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowDragAndDrop) property. -To disable multiple file selection and enable drag-drop operations in a Blazor File Manager component, you can check on this video. +To disable multiple file selection and enable drag-and-drop operations in the Blazor File Manager component, refer to the following video demonstration: {% youtube "youtube:https://www.youtube.com/watch?v=KU3RwdzDvJ0" %} @@ -27,19 +27,18 @@ The events which trigger when using drag and drop functionality are listed below @using Syncfusion.Blazor.FileManager - - + + ``` ## Output -After successful compilation of your application, simply press `F5` to run the application. - - +After successful compilation of your application, press `F5` to run the application. +{% previewsample "https://blazorplayground.syncfusion.com/embed/LNhosDjKUCGJtAQx?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Drag and Drop in Blazor FileManager](images/blazor-filemanager-drag-and-drop.gif) diff --git a/blazor/file-manager/end-user-capabilities.md b/blazor/file-manager/end-user-capabilities.md index 34cf943126..6a2f17d3d8 100644 --- a/blazor/file-manager/end-user-capabilities.md +++ b/blazor/file-manager/end-user-capabilities.md @@ -9,7 +9,7 @@ documentation: ug # End User Capabilities in Blazor File Manager Component -The File Manager UI is comprised of several sections like View, Toolbar, Breadcrumb, Context Menu, and so on. The UI of the File Manager is enhanced with `Details View` for browsing files and folders in a grid, `Navigation Pane` for folder navigation, and `Toolbar` for file operations. The File Manager with all features has the following sections in its UI. +The File Manager UI is comprised of several sections such as View, Toolbar, Breadcrumb, Context Menu, and so on. The UI is enhanced with `Details View` for browsing files and folders in a grid, `Navigation Pane` for folder navigation, and `Toolbar` for file operations. The File Manager includes the following sections in its UI: * [Toolbar](#toolbar) (For direct access to file operations) * [Context Menu](#context-menu) (For accessing file operations) @@ -21,21 +21,21 @@ The File Manager UI is comprised of several sections like View, Toolbar, Breadcr ![End User Capabilities in Blazor FileManager](./images/blazor-filemanager-user-interface.png) -The basic File Manager is a light weight component with all the basic functions. The basic File Manager has the following sections in its UI to browse files and folders and manage them with file operations. +The basic File Manager is a lightweight component with essential functions. It includes the following UI sections for browsing and managing files and folders: -* [Breadcrumb](#breadcrumb) (For parent folder navigations) -* [Large icons view](#large-icons-view) (For browsing files and folders) -* [Context Menu](#context-menu) (For accessing file operations) +- [Breadcrumb](#breadcrumb): Parent folder navigation +- [Large icons view](#large-icons-view): Browsing files and folders +- [Context Menu](#context-menu): Accessing file operations ![Blazor FileManager](./images/blazor-filemanager.png) ## Toolbar -The `Toolbar` provides easy access to the file operations using different buttons and it is presented at the top of the FileManager. +The `Toolbar` provides easy access to file operations using various buttons and is presented at the top of the FileManager. -If the Toolbar items exceed the size of the Toolbar, then the exceeding Toolbar size will be moved to Toolbar popup with a dropdown button at the end of Toolbar. +If the Toolbar items exceed the available space, excess items are moved to a Toolbar popup with a dropdown button at the end. -Refer [Toolbar](./file-operations.md#toolbar) section in file operations to know more about the buttons present in Toolbar. +Refer to the [Toolbar](./file-operations.md#toolbar) section for more details about the buttons available in the Toolbar. ![Blazor File Manager with Toolbar](./images/blazor-filemanager-toolbar.png) @@ -43,9 +43,9 @@ Refer [Toolbar](./file-operations.md#toolbar) section in file operations to know The Context Menu appears on user interaction such as right-click. The File Manager is provided with Context Menu support to perform list of file operations with the files and folders. Context menu appears with varying menu items based on the targets such as file, folder (including navigation pane folders), and layout (empty area in view). -Context menu can be customized using the [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerContextMenuSettings.html), [MenuOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_MenuOpened), and [OnMenuClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_OnMenuClick) events. +Context menu customization is available using [ContextMenuSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerContextMenuSettings.html), [MenuOpened](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_MenuOpened), and [OnMenuClick](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_OnMenuClick) events. -Refer [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) section to know more about the menu items present in Context Menu. +Refer to the [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) section for more information. ![Blazor File Manager with Context Menu](./images/blazor-filemanager-contextmenu.png) @@ -84,9 +84,9 @@ In the details view, the files are displayed in a sorted list order. This file l ## File Operations -The Blazor File Manager component is utilized for browsing, managing, and organizing files and folders in a file system through a web application. It offers all essential file operations, including creating new folders, uploading and downloading files, deleting and renaming existing files and folders, as well as previewing image files. +The Blazor File Manager component enables browsing, managing, and organizing files and folders through a web application. It supports essential file operations, including creating folders, uploading and downloading files, deleting and renaming files and folders, and previewing images. -Moreover, the table below displays the basic operations in the File Manager component and their corresponding functions. +The table below lists basic operations and their functions: |Operation Name|Function| |----|----| @@ -105,11 +105,11 @@ N> The *CreateFolder*, *Remove*, and *Rename* actions will be reflected in the F ### File and Folder Selection -In the Blazor File Manager component, you can select files and folders using the mouse click and arrow keys. The File Manager allows you to select multiple files and folders by enabling the [AllowMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowMultiSelection) property, which is enabled by default. +Files and folders can be selected using mouse clicks or arrow keys. Multiple selection is enabled by default with the [AllowMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowMultiSelection) property, which is enabled by default. You can perform multiple selections by pressing the Ctrl key or Shift key and selecting the files and folders, or by using the checkbox. To select all files in the current directory, you can use the Ctrl + A shortcut. -The [FileSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelected) event will be triggered when an item in the File Manager control is selected or unselected. +The [FileSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelected) event is triggered when an item is selected or unselected. ![File and folder selection in Blazor FileManger](./images/blazor-filemanager-selection.png) @@ -117,7 +117,7 @@ The [FileSelected](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileM In the Blazor File Manager component, you can perform the [**create**](https://blazor.syncfusion.com/documentation/file-manager/file-operations#creating-files-and-folders), [**rename**](https://blazor.syncfusion.com/documentation/file-manager/file-operations#renaming-files-and-folders), and [**delete**](https://blazor.syncfusion.com/documentation/file-manager/file-operations#deleting-files-and-folders) operation for the files and folder with the help of the Toolbar items button or by using Context Menu items. -Refer to the [Toolbar](./file-operations.md#toolbar) and [Context Menu](./context-menu.md#context-menu-in-blazor-filemanager-component) sections to learn more about the items that are present in the Toolbar and Context Menu. +Refer to the [Toolbar](./file-operations.md#toolbar) and [Context Menu](./context-menu.md#context-menu-in-blazor-filemanager-component) sections for more details. ![Create a folder in Blazor FileManger](./images/blazor-filemanager-create-operation.png) @@ -125,17 +125,17 @@ Refer to the [Toolbar](./file-operations.md#toolbar) and [Context Menu](./contex ### Moving File or Folder -In the Blazor File Manager component, you can [**move**](https://blazor.syncfusion.com/documentation/file-manager/file-operations#moving-files-and-folders) desired files or folders by using the **cut** or **copy** items button in the Toolbar, or by using the Context Menu. Additionally, you can move files or folders by utilizing the drag and drop functionality, which requires enabling the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowDragAndDrop) property to **true**. +In the Blazor File Manager component, can able to [**move**](https://blazor.syncfusion.com/documentation/file-manager/file-operations#moving-files-and-folders) desired files or folders by using the **cut** or **copy** items button in the Toolbar, or by using the Context Menu. Additionally, the files or folders are moved by utilizing the drag and drop functionality, which requires enabling the [AllowDragAndDrop](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowDragAndDrop) property to **true**. -To learn more, you can refer to the [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/toolbar), [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu), and [Drag and Drop](https://blazor.syncfusion.com/documentation/file-manager/drag-and-drop) sections. +Refer to [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/toolbar), [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu), and [Drag and Drop](https://blazor.syncfusion.com/documentation/file-manager/drag-and-drop) for more information. ![Moving file or folder in Blazor FileManager](images/blazor-filemanager-drag-and-drop.gif) ### Upload or Download a File -In the Blazor File Manager component, you can perform the [upload](https://blazor.syncfusion.com/documentation/file-manager/file-operations#uploading-files) or [download](https://blazor.syncfusion.com/documentation/file-manager/file-operations#downloading-files) operations with the help of the Toolbar items button or by using Context Menu items. +In the Blazor File Manager component, can able to perform the [upload](https://blazor.syncfusion.com/documentation/file-manager/file-operations#uploading-files) or [download](https://blazor.syncfusion.com/documentation/file-manager/file-operations#downloading-files) operations with the help of the Toolbar items button or by using Context Menu items. -Refer to the [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/file-operations#toolbar) and [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) sections to learn more about the items that are present in the Toolbar and Context Menu. +Refer to [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/file-operations#toolbar) and [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) for more details. ![Upload a file in Blazor FileManger](./images/blazor-filemanager-upload-operation.png) @@ -143,13 +143,13 @@ Refer to the [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/ ### Searching Files and Folders -In the Blazor File Manager component, you are able to [search](https://blazor.syncfusion.com/documentation/file-manager/file-operations#searching-files-and-folders) for the wanted files and folders using the default input search functionality option. +In the Blazor File Manager component, users able to [search](https://blazor.syncfusion.com/documentation/file-manager/file-operations#searching-files-and-folders) for the wanted files and folders using the default input search functionality option. ![Searching files and folders in Blazor FileManger](./images/blazor-filemanager-search-operation.png) ### Cut, Copy, and Paste -You can perform the **cut**, **copy**(https://blazor.syncfusion.com/documentation/file-manager/file-operations#copying-files-and-folders), and **paste** operation for the files and folders in the Blazor File Manager component with the help of the Toolbar items button or by using Context Menu items. +Perform **cut**, **copy**(https://blazor.syncfusion.com/documentation/file-manager/file-operations#copying-files-and-folders), and **paste** operation for the files and folders in the Blazor File Manager component with the help of the Toolbar items button or by using Context Menu items. Refer to the [Toolbar](https://blazor.syncfusion.com/documentation/file-manager/file-operations#toolbar)and [Context Menu](https://blazor.syncfusion.com/documentation/file-manager/context-menu) sections to learn more about the items that are present in the Toolbar and Context Menu. diff --git a/blazor/file-manager/file-operations.md b/blazor/file-manager/file-operations.md index 8ada490923..3445686ee0 100644 --- a/blazor/file-manager/file-operations.md +++ b/blazor/file-manager/file-operations.md @@ -656,7 +656,7 @@ Move operation triggers on the server side and find the related code details. ## Sorting Files and Folders -In the Blazor File Manager component, you can perform sorting operations for both folders and files using the [SortBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_SortBy) and [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_SortOrder) properties. Additionally, you can use the **Sort by** toolbar button available in the File Manager component to perform sorting operations. +Sort files and folders using the [SortBy](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_SortBy) and [SortOrder](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_SortOrder) properties, or the Sort By toolbar button available in the File Manager component to perform sorting operations. **SortBy** - A field name used to sort the folders and files in the File Manager component. The default value is Name. **SortOrder** - sort order for the files and folders in the File Manager component. @@ -681,7 +681,10 @@ The available options for the sort order are: ``` -## Custom sorting +{% previewsample "https://blazorplayground.syncfusion.com/embed/LDhSWNXgUiEgHxKb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} +![File Manager Sorting](./images/sorting.png) + +## Custom Sorting The File Manager component provides a way to customize the default sort action for the LargeIconsView by defining the [`SortComparer`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_SortComparer) property and for sorting individual columns in the DetailsView by defining the `SortComparer` property in the [`FileManagerColumn`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerColumn.html) class.The `SortComparer` class should implement the [IComparer](https://learn.microsoft.com/en-us/dotnet/api/system.collections.generic.icomparer-1?view=net-8.0) interface. @@ -1230,9 +1233,9 @@ Download operation triggers on the server side and find the related code details ``` -In the Blazor File Manager component, you are able to download the selected files dynamically using our [DownloadFilesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_DownloadFilesAsync_System_String___) method instead of our default download toolbar button. +You can also download selected files dynamically using [DownloadFilesAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_DownloadFilesAsync_System_String___) method instead of our default download toolbar button. -To use this method, you need to pass the selected files or folders as parameters. +To use this method, need to pass the selected files or folders as parameters. ```cshtml @@ -1261,7 +1264,7 @@ To use this method, you need to pass the selected files or folders as parameters ### Prevent Downloading File -In the Blazor File Manager component, you are able to prevent the download action for any types of files or folders by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.BeforeDownloadEventArgs-1.html#Syncfusion_Blazor_FileManager_BeforeDownloadEventArgs_1_Cancel) argument to **true** of the [BeforeDownload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_BeforeDownload) event. +Prevent download actions for specific files or folders by setting the [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.BeforeDownloadEventArgs-1.html#Syncfusion_Blazor_FileManager_BeforeDownloadEventArgs_1_Cancel) argument to **true** in the [BeforeDownload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_BeforeDownload) event. The following example demonstrates how to prevent the download actions for all types of files in the Blazor File Manager component. diff --git a/blazor/file-manager/file-system-provider.md b/blazor/file-manager/file-system-provider.md index 3312b94d34..5d0b3cebb0 100644 --- a/blazor/file-manager/file-system-provider.md +++ b/blazor/file-manager/file-system-provider.md @@ -9,9 +9,9 @@ documentation: ug # File System Providers in Blazor File Manager Component -The file system provider allows the File Manager component to manage the files and folders in a physical or cloud-based file system. It provides the methods for performing various file actions like creating a new folder, copying and moving of files or folders, deleting, uploading, and downloading the files or folders in the file system. +The file system provider enables the File Manager component to manage files and folders in a physical or cloud-based file system. It provides methods for performing file actions such as creating folders, copying and moving items, deleting, uploading, and downloading files. -The following file providers are added in Syncfusion® Blazor File Manager component. +The following file providers are available in the Syncfusion® Blazor File Manager component. * [Physical file system provider](https://blazor.syncfusion.com/documentation/file-manager/ASP-NET-Core-file-system-provider) * [Azure cloud file system Provider](https://blazor.syncfusion.com/documentation/file-manager/ASP-NET-Core-Azure-cloud-file-system-provider) diff --git a/blazor/file-manager/getting-started-with-maui-app.md b/blazor/file-manager/getting-started-with-maui-app.md index ab58da8977..6cf0b7774c 100644 --- a/blazor/file-manager/getting-started-with-maui-app.md +++ b/blazor/file-manager/getting-started-with-maui-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor FileManager component -This section explains you through the step-by-step process of integrating the Syncfusion® Blazor FileManager component into your Blazor MAUI application using both Visual Studio and Visual Studio Code. +This section explains how to integrate the Syncfusion ® Blazor FileManager component into a Blazor MAUI application using both Visual Studio or Visual Studio Code. {% tabcontents %} @@ -17,7 +17,7 @@ This section explains you through the step-by-step process of integrating the Sy ## Prerequisites -To use the MAUI project templates, install the Mobile development with the .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). +To use the MAUI project templates, install the Mobile development with .NET extension for Visual Studio. For more details, refer to [here](https://learn.microsoft.com/en-us/dotnet/MAUI/get-started/installation?tabs=vswin) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). ## Create a new Blazor MAUI App in Visual Studio @@ -48,7 +48,7 @@ To use the MAUI project templates, install the Mobile development with the .NET ## Create a new Blazor MAUI App in Visual Studio Code -You can create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. +Create a Blazor MAUI App using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/dotnet/maui/get-started/first-app?pivots=devices-windows&view=net-maui-9.0&tabs=visual-studio-code) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor MAUI App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/maui-blazor-app) documentation. ## Install Blazor FileManager and Themes NuGet in the App @@ -66,7 +66,7 @@ dotnet restore {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for a list of available NuGet packages with component details. {% endtabcontent %} @@ -123,7 +123,7 @@ namespace MauiBlazorWindow; {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script references in the `` section of the **~/index.html** file. @@ -158,13 +158,13 @@ Add the Syncfusion® Blazor FileManager comp ### How to Run the Sample on Windows -Run the sample in Windows Machine mode, and it will run Blazor MAUI in Windows. +Run the sample in Windows Machine mode to run Blazor MAUI in Windows. ![Blazor File Manager Component](images/blazor-filemanager-maui-app.png) ### How to Run the Sample on Android -To run the Blazor DataGrid in a Blazor Android MAUI application using the Android emulator, follow these steps: +To run the Blazor FileManager in a Blazor Android MAUI application using the Android emulator, follow these steps: Refer [here](https://learn.microsoft.com/en-us/dotnet/maui/android/emulator/device-manager#android-device-manager-on-windows) to install and launch Android emulator. diff --git a/blazor/file-manager/getting-started-with-server-app.md b/blazor/file-manager/getting-started-with-server-app.md index 83e878e5ca..09a686c7aa 100644 --- a/blazor/file-manager/getting-started-with-server-app.md +++ b/blazor/file-manager/getting-started-with-server-app.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor File Manager Component in Server App -This section briefly explains about how to include [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in your Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component into a Blazor Server App using Visual Studio, Visual Studio Code and .NET CLI. {% tabcontents %} @@ -23,7 +23,7 @@ This section briefly explains about how to include [Blazor FileManager](https:// ## Create a new Blazor App in Visual Studio -You can create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. +Create a **Blazor Server App** using **Blazor Web App** template in Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=windows) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio) documentation. ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App @@ -48,11 +48,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor App in Visual Studio Code +## Create a New Blazor Server App in Visual Studio Code -You can create a **Blazor Server App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. +A **Blazor Server App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-7.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Server App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-server-side-visual-studio?tabcontent=visual-studio-code) documentation. -Alternatively, you can create a Server application using the following command in the terminal(Ctrl+`). +Alternatively, a Server application can be created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root directory where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -91,7 +91,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,7 +114,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates new Blazor Server App and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor FileManager and Themes NuGet in the App @@ -130,7 +130,7 @@ dotnet restore {% endhighlight %} {% endtabs %} -N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages list with component details. +N> Syncfusion® Blazor components are available in [nuget.org](https://www.nuget.org/packages?q=syncfusion.blazor). Refer to [NuGet packages](https://blazor.syncfusion.com/documentation/nuget-packages) topic for available NuGet packages with component details. {% endtabcontent %} @@ -151,7 +151,7 @@ Open the **~/_Imports.razor** file and import the `Syncfusion.Blazor` and `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Server App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Server App. {% tabs %} {% highlight C# tabtitle="~/Program.cs" hl_lines="3 10" %} @@ -172,9 +172,9 @@ builder.Services.AddSyncfusionBlazor(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet and script in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet in the `` and the script reference at the end of the `` in the **App.razor** file as shown below: ```html @@ -191,11 +191,11 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. -## Add Blazor File Manager component +## Add Blazor File Manager Component -Add the Syncfusion® Blazor File Manager component in the **~/Components/Pages/Home.razor** file. If an interactivity location as `per page/component`, define a render mode at the top of the `Home.razor` page. +Add the Syncfusion® Blazor File Manager component in the **~/Components/Pages/Home.razor** file. If an interactivity location is set to `per page/component`, define a render mode at the top of the `Home.razor` page. N> If an Interactivity Location is set to `Global` and the **Render Mode** is set to `Server`, the render mode is configured in the `App.razor` file by default. @@ -228,7 +228,7 @@ Create a new folder named `Models` in the server project. Add the necessary mode To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder. -Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file +Make sure the controller `FileManagerController.cs` uses the model classes that were created. Import the model namespace at the top of the controller file. File Manager's base functions are available in the below namespace. ```cshtml @@ -327,7 +327,7 @@ app.UseRouting(); app.MapControllers(); ``` -This will configure and map the controller in your Blazor App. +This configures and maps the controller in the Blazor App. ## Create Web Server App @@ -349,9 +349,9 @@ Add the Syncfusion® Blazor File Manager com {% endhighlight %} {% endtabs %} -Add your required files and folders under the `wwwroot\Files` directory. -* In your project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project. -* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly. +Add required files and folders under the `wwwroot\Files` directory. +* In the project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of the server project. +* Inside the `wwwroot` directory, create a new folder named `Files`. This is used to store static files like images, documents, or other resources that are served directly. * Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in your default web browser. ![Blazor File Manager Component](images/blazor-filemanager-component.png) diff --git a/blazor/file-manager/getting-started-with-wasm-app.md b/blazor/file-manager/getting-started-with-wasm-app.md index 5742e2c33e..2a13be0d20 100644 --- a/blazor/file-manager/getting-started-with-wasm-app.md +++ b/blazor/file-manager/getting-started-with-wasm-app.md @@ -11,7 +11,7 @@ documentation: ug # Getting Started with Blazor File Manager Component in WASM App -This section briefly explains about how to include [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in your Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor File Manager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component into a Blazor WebAssembly App using Visual Studio, Visual Studio Code and .NET CLI. {% tabcontents %} @@ -23,7 +23,7 @@ This section briefly explains about how to include [Blazor File Manager](https:/ ## Create a new Blazor App in Visual Studio -You can create a **Blazor WebAssembly App** using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). +A **Blazor WebAssembly App** can be created using Visual Studio via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app). ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App @@ -50,9 +50,9 @@ N> Syncfusion® Blazor components are availa ## Create a new Blazor App in Visual Studio Code -You can create a **Blazor WebAssembly App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). +A **Blazor WebAssembly App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-9.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this guide](https://blazor.syncfusion.com/documentation/getting-started/blazor-webassembly-app?tabcontent=visual-studio-code). -Alternatively, you can create a WebAssembly application using the following command in the terminal(Ctrl+`). +Alternatively, a WebAssembly application can be created using the following command in the terminal (Ctrl+`): {% tabs %} @@ -68,7 +68,7 @@ cd BlazorApp ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. +* Ensure the current directory is the project root directory where the `.csproj` file is located. * Run the following command to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -91,7 +91,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,7 +114,7 @@ cd BlazorApp {% endhighlight %} {% endtabs %} -This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. +This command creates new Blazor WebAssembly App and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/dotnet/core/tools/dotnet-new) topics for more details. ## Install Syncfusion® Blazor FileManager and Themes NuGet in the App @@ -173,9 +173,9 @@ await builder.Build().RunAsync(); {% endhighlight %} {% endtabs %} -## Add stylesheet and script resources +## Add Stylesheet and Script Resources -The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Reference the stylesheet and script in the `` of the main page as follows: +The theme stylesheet and script can be accessed from NuGet through [Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets). Include the stylesheet references within the `` section and script references in `` section of the **~/index.html** file. * For Blazor WebAssembly app, include it in the **~/index.html** file. @@ -183,12 +183,16 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A .... - +.... + + .... + + ``` N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. -## Add Blazor File Manager component +## Add Blazor File Manager Component Add the Syncfusion® Blazor File Manager component in the **~/Pages/Index.razor** file. @@ -212,7 +216,7 @@ Add the Syncfusion® Blazor File Manager com Create a new folder named `Models` in the server project. Add the necessary model files to this folder for handling file operations. Download the `PhysicalFileProvider.cs` and `Base` folder from this [repository](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/tree/master/Models) and place them in the Models folder. -## Create a new folder controller +## Create a New Folder Controller To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder. @@ -231,7 +235,7 @@ using Syncfusion.EJ2.FileManager.PhysicalFileProvider; File Manager supports the basic file actions like Read, Delete, Copy, Move, Get Details, Search, Rename, and Create New Folder. -For standalone Blazor WASM applications, you can use the service from this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/). For other types of applications like ASP hosted applications, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder and add the following code in that file. +For standalone Blazor WASM applications, a service from this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/) can be used. For other types of applications like ASP hosted applications, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder and add the following code in that file. {% tabs %} {% highlight cs tabtitle="Controllers/FileManagerController.cs" %} @@ -326,10 +330,11 @@ Add the Syncfusion® Blazor File Manager com {% endhighlight %} {% endtabs %} -Add your required files and folders under the `wwwroot\Files` directory. -* In your project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project. -* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly. -* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in your default web browser. +Add required files and folders under the `wwwroot\Files` directory. + +* In the project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of the server project. +* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that are served directly. +* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in default web browser. ![Blazor File Manager Component](images/blazor-filemanager-component.png) diff --git a/blazor/file-manager/getting-started-with-web-app.md b/blazor/file-manager/getting-started-with-web-app.md index c6b3fdb357..a973accd97 100644 --- a/blazor/file-manager/getting-started-with-web-app.md +++ b/blazor/file-manager/getting-started-with-web-app.md @@ -9,7 +9,7 @@ documentation: ug # Getting Started with Blazor File Manager Component in Web App -This section briefly explains about how to include [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component in your Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. +This section explains how to integrate the Syncfusion [Blazor FileManager](https://www.syncfusion.com/blazor-components/blazor-file-manager) component into a Blazor Web App using [Visual Studio](https://visualstudio.microsoft.com/vs/), Visual Studio Code and .NET CLI. {% tabcontents %} @@ -19,11 +19,11 @@ This section briefly explains about how to include [Blazor FileManager](https:// * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio +## Create a New Blazor Web App in Visual Studio -You can create a **Blazor Web App** using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. +A **Blazor Web App** can be created using Visual Studio 2022 via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-integration/template-studio). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app) documentation. -You need to configure the corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) while creating a Blazor Web Application. +The corresponding [Interactive render mode](https://learn.microsoft.com/en-us/aspnet/core/blazor/components/render-modes?view=aspnetcore-8.0#render-modes) and [Interactivity location](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vs) need to be configured while creating a Blazor Web Application. ![Create Blazor Web App](images/blazor-create-web-app.png) @@ -31,9 +31,9 @@ You need to configure the corresponding [Interactive render mode](https://learn. To add **Blazor FileManager** component in the app, open the NuGet package manager in Visual Studio (*Tools → NuGet Package Manager → Manage NuGet Packages for Solution*), search and install [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/). -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are used in the Blazor Web App, the Syncfusion Blazor components NuGet packages need to be installed within the client project. -Alternatively, you can utilize the following package manager command to achieve the same. +Alternatively, the Package Manager Console can be used to install the required NuGet package {% tabs %} {% highlight C# tabtitle="Package Manager" %} @@ -54,11 +54,11 @@ N> Syncfusion® Blazor components are availa * [System requirements for Blazor components](https://blazor.syncfusion.com/documentation/system-requirements) -## Create a new Blazor Web App in Visual Studio Code +## Create a New Blazor Web App in Visual Studio Code -You can create a **Blazor Web App** using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. +A **Blazor Web App** can be created using Visual Studio Code via [Microsoft Templates](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?view=aspnetcore-8.0&pivots=vsc) or the [Syncfusion® Blazor Extension](https://blazor.syncfusion.com/documentation/visual-studio-code-integration/create-project). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=visual-studio-code) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +The appropriate interactive render mode and interactivity location should be configured when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with the `Auto` interactive render mode, use the following commands. @@ -74,11 +74,11 @@ cd BlazorWebApp.Client ## Install Syncfusion® Blazor File Manager and Themes NuGet in the App -If you utilize `WebAssembly` or `Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are used in the Blazor Web App, the Syncfusion® Blazor components NuGet packages need to be installed within the client project. * Press Ctrl+` to open the integrated terminal in Visual Studio Code. -* Ensure you’re in the project root directory where your `.csproj` file is located. -* Run the following command to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. +* Ensure the current directory is the project root directory where the `.csproj` file is located. +* Run the following command to install the [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package and ensure all dependencies are installed. {% tabs %} @@ -100,7 +100,7 @@ N> Syncfusion® Blazor components are availa ## Prerequisites -Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If you previously installed the SDK, you can determine the installed version by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). +Latest version of the [.NET Core SDK](https://dotnet.microsoft.com/en-us/download). If the SDK was previously installed, the installed version can be determined by executing the following command in a command prompt (Windows) or terminal (macOS) or command shell (Linux). {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -114,7 +114,7 @@ dotnet --version Run the following command to create a new Blazor Web App in a command prompt (Windows) or terminal (macOS) or command shell (Linux). For detailed instructions, refer to [this Blazor Web App Getting Started](https://blazor.syncfusion.com/documentation/getting-started/blazor-web-app?tabcontent=.net-cli) documentation. -Configure the appropriate interactive render mode and interactivity location when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). +The appropriate interactive render mode and interactivity location should be configured when setting up a Blazor Web Application. For detailed information, refer to the [interactive render mode documentation](https://blazor.syncfusion.com/documentation/common/interactive-render-mode). For example, in a Blazor Web App with `Auto` interactive render mode, use the following commands: @@ -128,13 +128,13 @@ cd BlazorApp.Client {% endhighlight %} {% endtabs %} -This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside your current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. +This command creates new Blazor Web App and places it in a new directory called `BlazorApp` inside the current location. See [Create Blazor app topic](https://dotnet.microsoft.com/en-us/learn/aspnet/blazor-tutorial/create) and [dotnet new CLI command](https://learn.microsoft.com/en-us/aspnet/core/blazor/tooling?pivots=linux-macos&view=aspnetcore-8.0) topics for more details. ## Install Syncfusion® Blazor FileManager and Themes NuGet in the App -Here's an example of how to add **Blazor FileManager** component in the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install a [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. +Here's an example of how to add **Blazor FileManager** component to the application using the following command in the command prompt (Windows) or terminal (Linux and macOS) to install the [Syncfusion.Blazor.FileManager](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager/) and [Syncfusion.Blazor.Themes](https://www.nuget.org/packages/Syncfusion.Blazor.Themes/) NuGet package. See [Install and manage packages using the dotnet CLI](https://learn.microsoft.com/en-us/nuget/consume-packages/install-use-packages-dotnet-cli) topics for more details. -If you utilize `WebAssembly or Auto` render modes in the Blazor Web App need to be install Syncfusion® Blazor components NuGet packages within the client project. +If `WebAssembly` or `Auto` render modes are used in the Blazor Web App, the Syncfusion® Blazor components NuGet packages need to be installed within the client project. {% tabs %} {% highlight c# tabtitle=".NET CLI" %} @@ -167,9 +167,9 @@ Open the **~/_Imports.razor** file from the client project and import the `Syncf ## Register Syncfusion® Blazor Service -Register the Syncfusion® Blazor Service in the **~/Program.cs** file of your Blazor Web App. +Register the Syncfusion® Blazor Service in the **~/Program.cs** file of the Blazor Web App. -If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, you must register the Syncfusion® Blazor service in the **~/Program.cs** files of the main `server` project and associated `.Client` project. +If your Blazor Web App uses `WebAssembly` or `Auto` interactive render modes, the Syncfusion® Blazor service must be registered in the **~/Program.cs** files of the main `server` project and associated `.Client` project. {% tabs %} {% highlight c# tabtitle="Server(~/_Program.cs)" hl_lines="3 11" %} @@ -219,7 +219,7 @@ The theme stylesheet and script can be accessed from NuGet through [Static Web A ``` -N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in your Blazor application. +N> Check out the [Blazor Themes](https://blazor.syncfusion.com/documentation/appearance/themes) topic to discover various methods ([Static Web Assets](https://blazor.syncfusion.com/documentation/appearance/themes#static-web-assets), [CDN](https://blazor.syncfusion.com/documentation/appearance/themes#cdn-reference), and [CRG](https://blazor.syncfusion.com/documentation/common/custom-resource-generator)) for referencing themes in your Blazor application. Also, check out the [Adding Script Reference](https://blazor.syncfusion.com/documentation/common/adding-script-references) topic to learn different approaches for adding script references in a Blazor application. ## Add Syncfusion® Blazor File Manager component @@ -266,7 +266,7 @@ Create a new folder named `Models` in the server project. Add the necessary mode To initialize a local service, create a new folder name with `Controllers` inside the server part of the project. Then, create a new file `FileManagerController` with extension `.cs` inside the `Controllers` folder. -Make sure your controller `FileManagerController.cs` uses the model classes you've created. Import the model namespace at the top of your controller file +Make sure the controller `FileManagerController.cs` uses the model classes that were created. Import the model namespace at the top of the controller file. File Manager's base functions are available in the below namespace. ```cshtml @@ -368,7 +368,7 @@ app.MapControllers(); ``` -This will configure and map the controller in your Blazor App. +This configures and maps the controller in the Blazor App. ## Create Web App @@ -396,7 +396,7 @@ Blazor supports different interactive modes for server-side rendering: * Interactive Server Render Mode: This mode allows Blazor components to be rendered on the server, sending the HTML to the client while maintaining interactive capabilities. It provides a balance between server-side processing and client-side responsiveness. -* To enable this mode, configure the `Program.cs` file in your Blazor project using the `AddInteractiveServerRenderMode` method. +* To enable this mode, configure the `Program.cs` file in the Blazor project using the `AddInteractiveServerRenderMode` method. ````cshtml builder.Services.AddRazorComponents() .AddInteractiveServerComponents(); @@ -412,11 +412,11 @@ Define a render mode at top of the component, as follows: {% endhighlight %} {% endtabs %} -Add your required files and folders under the `wwwroot\Files` directory. +Add required files and folders under the `wwwroot\Files` directory. -* In your project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of your server project. -* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that you want to serve directly. -* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion® Blazor File Manager component in your default web browser. +* In the project, the `wwwroot` directory is where static files are served from. It is typically found at the root level of the server project. +* Inside the `wwwroot` directory, create a new folder named `Files`. This will be used to store static files like images, documents, or other resources that are served directly. +* Press Ctrl+F5 (Windows) or +F5 (macOS) to launch the application. This will render the Syncfusion Blazor File Manager component in the default web browser. ![Blazor File Manager Component](images/blazor-filemanager-component.png) diff --git a/blazor/file-manager/images/blazor-filemanager-virtualization.gif b/blazor/file-manager/images/blazor-filemanager-virtualization.gif index 8f39c80455..aa4591c67f 100644 Binary files a/blazor/file-manager/images/blazor-filemanager-virtualization.gif and b/blazor/file-manager/images/blazor-filemanager-virtualization.gif differ diff --git a/blazor/file-manager/images/custom-column.png b/blazor/file-manager/images/custom-column.png new file mode 100644 index 0000000000..ad8bb9df06 Binary files /dev/null and b/blazor/file-manager/images/custom-column.png differ diff --git a/blazor/file-manager/images/customize-column.png b/blazor/file-manager/images/customize-column.png new file mode 100644 index 0000000000..c231e3337c Binary files /dev/null and b/blazor/file-manager/images/customize-column.png differ diff --git a/blazor/file-manager/images/sorting.png b/blazor/file-manager/images/sorting.png new file mode 100644 index 0000000000..62b70795b5 Binary files /dev/null and b/blazor/file-manager/images/sorting.png differ diff --git a/blazor/file-manager/images/toolbar-visible.png b/blazor/file-manager/images/toolbar-visible.png new file mode 100644 index 0000000000..89b6a66ca5 Binary files /dev/null and b/blazor/file-manager/images/toolbar-visible.png differ diff --git a/blazor/file-manager/multiple-file-selection.md b/blazor/file-manager/multiple-file-selection.md index 773818eae7..b822e89ed3 100644 --- a/blazor/file-manager/multiple-file-selection.md +++ b/blazor/file-manager/multiple-file-selection.md @@ -9,7 +9,7 @@ documentation: ug # Multiple File Selection in Blazor File Manager Component -The File Manager allows you to select multiple files by enabling the [`AllowMultiSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowMultiSelection) property (enabled by default). The multiple selection can be done by pressing the `Ctrl` key or `Shift` key and selecting the files. The check box can also be used to do multiple selection. `Ctrl + A` can be used to select all files in the current directory. The [`FileSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelected) event will be triggered when the items of File Manager control is selected or unselected. +The File Manager allows the selection of multiple files by enabling the [`AllowMultiSelection`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowMultiSelection) property (enabled by default). Multiple selection can be done by pressing the `Ctrl` or `Shift` key while selecting files. Checkboxes can also be used for multiple selection. `Ctrl + A` can be used to select all files in the current directory. The [`FileSelected`](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelected) event is triggered when items in the File Manager control are selected or unselected. ```cshtml @@ -27,17 +27,17 @@ The File Manager allows you to select multiple files by enabling the [`AllowMult ## Output -After successful compilation of your application, simply press `F5` to run the application. - +After successful compilation, the application can be run by pressing `F5`. +{% previewsample "https://blazorplayground.syncfusion.com/embed/BDBeWXZKALyVNmrj?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} ![Blazor File Manager with Multiple Selection](images/blazor-filemanager-multi-selection.png) ## Getting Selected Files -In the Blazor File Manager component, you can retrieve the details of the selected files or folders using the [GetSelectedFiles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_GetSelectedFiles) method. +In the Blazor File Manager component, the details of selected files or folders can be retrieved using the [GetSelectedFiles](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_GetSelectedFiles) method. -Additionally, you can obtain these details through the [FileDetails](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileSelectionEventArgs-1.html#Syncfusion_Blazor_FileManager_FileSelectionEventArgs_1_FileDetails) argument of the [FileSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelection) event. +Additionally, these details can be obtained through the [FileDetails](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileSelectionEventArgs-1.html#Syncfusion_Blazor_FileManager_FileSelectionEventArgs_1_FileDetails) argument of the [FileSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelection) event. ```cshtml @@ -71,7 +71,7 @@ Additionally, you can obtain these details through the [FileDetails](https://hel ## Prevent Selection for Specific Files/Folders -In the Blazor File Manager component, you are able to prevent selection of specific files or folders by setting the [FileSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelection) event's [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileSelectionEventArgs-1.html#Syncfusion_Blazor_FileManager_FileSelectionEventArgs_1_Cancel) argument value to **true**. +In the Blazor File Manager component, selection of specific files or folders can be prevented by setting the [FileSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_FileSelection) event's [Cancel](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileSelectionEventArgs-1.html#Syncfusion_Blazor_FileManager_FileSelectionEventArgs_1_Cancel) argument value to `true`. For example, in the following example, selection is prevented for the **Music** folder. @@ -103,11 +103,11 @@ For example, in the following example, selection is prevented for the **Music** ## Range Selection -The File Manager supports for selecting files and folders in specific ranges through mouse drag as like File Explorer. This is particularly useful in scenarios where users need to select a large group of files quickly without manually clicking each one. +The File Manager supports selecting files and folders in specific ranges through mouse drag, similar to File Explorer. This is useful in scenarios where there is a need to select a large group of files quickly without manually clicking each one. ### Enabling Range Selection -To enable range selection, you need to set the [EnableRangeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableRangeSelection) property to `true` and ensure that multi-selection is allowed using the [AllowMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowMultiSelection) property. +To enable range selection, set the [EnableRangeSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableRangeSelection) property to `true` and ensure that multi-selection is allowed using the [AllowMultiSelection](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowMultiSelection) property. ````cshtml @using Syncfusion.Blazor.FileManager; @@ -126,9 +126,9 @@ To enable range selection, you need to set the [EnableRangeSelection](https://he ## Events -The Blazor File Manager component includes FileSelection and FileSelected events which are triggered during file selection and after a file has been selected, respectively. These events can be bound to the File Manager using the **FileManagerEvents**, which requires the **TValue** to be provided. +The Blazor File Manager component includes `FileSelection` and `FileSelected` events which are triggered during file selection and after a file has been selected, respectively. These events can be bound to the File Manager using the **FileManagerEvents**, which requires the **TValue** to be provided. -N> All the events should be provided in a single **FileManagerEvents** component. +N> All events should be provided in a single **FileManagerEvents** component. ### FileSelection diff --git a/blazor/file-manager/pagination.md b/blazor/file-manager/pagination.md index 6e83503fba..ec34028d03 100644 --- a/blazor/file-manager/pagination.md +++ b/blazor/file-manager/pagination.md @@ -11,15 +11,15 @@ documentation: ug Pagination provides an option to display files and folders in segmented pages, making it easier to navigate through large directories. This feature is particularly useful when dealing with extensive file systems in the File Manager component. -To enable pagination, you need to set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the File Manager. When `AllowPaging` is enabled, a pager control rendered at the bottom of the File Manager, allowing you to navigate through different pages. +To enable pagination, set the [AllowPaging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_AllowPaging) property to **true**. This property determines whether paging is enabled or disabled for the File Manager. When `AllowPaging` is enabled, a pager control is rendered at the bottom of the File Manager, allowing navigation through different pages. -## Customize the pagination options +## Customize Pagination Options -Customizing the pagination options in the Syncfusion® File Manager allows you to tailor the File Manager pager according to your specific requirements. You can customize the pagination to display the number of pages using the `NumericItemsCount` property, change the current page using `CurrentPage` property, display the number of records in the File Manager using the `PageSize` property, and even adjust the page sizes in a dropdown using the `PageSizes` property. +Customizing the pagination options allows tailoring the File Manager pager to specific requirements. The pagination can be customized to display the number of pages using the `NumericItemsCount` property, change the current page using the `CurrentPage` property, display the number of records in the File Manager using the `PageSize` property, and adjust the page sizes in a dropdown using the `PageSizes` property. -### Change the page size +### Change the Page Size -The Syncfusion® File Manager allows you to control the number of records displayed per page, providing you with flexibility in managing your data. This feature is particularly useful when you want to adjust the amount of data visible to you at any given time. To achieve this, you can utilize the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_PageSize) property. This property is used to specify the initial number of records to display on each page. +The number of records displayed per page can be controlled, providing flexibility in managing data. This feature is useful when adjusting the amount of data visible at any given time. To achieve this, use the [PageSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_PageSize) property. This property specifies the initial number of records to display on each page. The following example demonstrates how to change the page size of a File Manager using the `PageSize` property. @@ -36,13 +36,16 @@ The following example demonstrates how to change the page size of a File Manager ```` + +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreiXDqgrHomyEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + Below is a screenshot illustrating the `PageSize` property in the File Manager component. ![Pagination in Blazor File Manager](images/blazor-filemanager-pagesize.png) -### Change the page count +### Change the Page Count -The [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_NumericItemsCount) property is used to control the number of numeric buttons displayed in the pager when pagination is enabled. +The [NumericItemsCount](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_NumericItemsCount) property controls the number of numeric buttons displayed in the pager when pagination is enabled. ````cshtml @using Syncfusion.Blazor.FileManager; @@ -61,11 +64,11 @@ Below is a screenshot illustrating the `NumericItemsCount` property in the File ![Pagination in Blazor File Manager](images/blazor-filemanager-numericitemcount.png) -### Change the current page +### Change the Current Page -The Syncfusion® File Manager allows you to change the currently displayed page, which can be particularly useful when you need to navigate through different pages of data either upon the initial rendering of the File Manager or update the displayed page based on interactions or specific conditions. The default value of **CurrentPage** property is 1. +The currently displayed page can be changed, which is useful when navigating through different pages of data either upon the initial rendering of the File Manager or updating the displayed page based on interactions or specific conditions. The default value of **CurrentPage** property is 1. -To change the current page in the Syncfusion® File Manager, you can utilize the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_CurrentPage) property in [FileManagerPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html) component, which defines the current page number of the pager. +To change the current page in the Syncfusion® File Manager, utilize the [CurrentPage](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_CurrentPage) property in [FileManagerPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html) component, which defines the current page number of the pager. The following example demonstrates how to implement the `CurrentPage` property. @@ -84,6 +87,8 @@ The following example demonstrates how to implement the `CurrentPage` property. ```` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VNLoiXtKgLEdEWUR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + Below is a screenshot illustrating the `CurrentPage` property in the File Manager component. ![Pagination in Blazor File Manager](images/blazor-filemanager-currentpage.png) @@ -91,11 +96,11 @@ Below is a screenshot illustrating the `CurrentPage` property in the File Manage ## Pager Template in Blazor File Manager -The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_Template) property in the [FileManagerPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html) allows you to insert custom UI elements, such as buttons or any HTML elements into the File Manager page settings. This offers greater flexibility and customization for the paging interface. +The [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html#Syncfusion_Blazor_FileManager_FileManagerPageSettings_Template) property in the [FileManagerPageSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerPageSettings.html) allows inserting custom UI elements, such as buttons or any HTML elements, into the File Manager page settings. This offers greater flexibility and customization for the paging interface. -### How to navigate to particular page +### Navigate to a Particular Page -By invoking the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_GoToPageAsync_System_Int32_) method within the pager template for the Blazor File Manager component, you can navigate to a specific page by passing the page number to the method. +By invoking the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_GoToPageAsync_System_Int32_) method within the pager template, a specific page can be navigated to by passing the page number to the method. Below is an example on how to customize pagination in the Syncfusion® File Manager by adding a custom button and using the [GoToPageAsync](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_GoToPageAsync_System_Int32_) method in the pager template for specific page navigation. @@ -124,14 +129,15 @@ Below is an example on how to customize pagination in the Syncfusion ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/rtVSCXXKgUiWEPWR?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} The screenshot below shows the page sizes dropdown in the File Manager. @@ -156,11 +163,11 @@ The screenshot below shows the page sizes dropdown in the File Manager. ## Events in Pagination -You can add events to handle actions during pagination in the File Manager. +Events can be added to handle actions during pagination. -The [PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_PageChanging) event triggers before the page is changed, allowing you to handle actions before navigation. +The [PageChanging](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_PageChanging) event triggers before the page is changed, allowing handling of actions before navigation. -The [PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_PageChanged) event occurs after the page has been switched, allows you to perform actions like loading new data after the page has changed. +The [PageChanged](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_PageChanged) event occurs after the page has been switched, allowing performing actions like loading new data after the page has changed. ````cshtml @using Syncfusion.Blazor.FileManager; diff --git a/blazor/file-manager/physical-file-system-provider.md b/blazor/file-manager/physical-file-system-provider.md index d153be7495..50cac09c30 100644 --- a/blazor/file-manager/physical-file-system-provider.md +++ b/blazor/file-manager/physical-file-system-provider.md @@ -1,6 +1,6 @@ --- layout: post -title: Physical provider in Blazor File Manager Component | Syncfusion +title: Physical Provider in Blazor File Manager Component | Syncfusion description: Checkout and learn here all about Physical file system provider in Syncfusion Blazor File Manager component and more. platform: Blazor control: File Manager @@ -9,7 +9,7 @@ documentation: ug # Physical file system provider -The Physical file system provider allows the users to access and manage the physical file system. To get started, clone the [Physical file system provider](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider) using the following command. +The Physical file system provider allows users to access and manage the physical file system. To begin, clone the [Physical file system provider](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider) using the following command. ``` @@ -19,9 +19,9 @@ cd ej2-aspcore-file-provider ``` -After cloning, just open the project in Visual Studio and restore the NuGet packages. Now, you need to set the root directory of the physical file system in the File Manager controller. +After cloning, open the project in Visual Studio and restore the NuGet packages. Set the root directory of the physical file system in the File Manager controller. -After setting the root directory of the file system, just 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 physical file system. +After setting the root directory, build and run the project. The project will be hosted at `http://localhost:{port}`. Mapping the `ajaxSettings` property of the File Manager component to the appropriate controller methods allows managing the files in the physical file system. ```cshtml @@ -39,8 +39,8 @@ After setting the root directory of the file system, just build and run the proj ``` -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 Physical file system provider, you need to initialize the physical service 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 Physical file system provider, initialize the physical service 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 `FileManagerController.cs` found at this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/blob/master/Controllers/FileManagerController.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 `FileManagerController.cs` found at this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider/blob/master/Controllers/FileManagerController.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 Physical file system provider, refer to this [link](https://github.com/SyncfusionExamples/ej2-aspcore-file-provider#key-features). When using a custom physical file provider in Syncfusion File Manager, installing a [PhysicalFileProvider](https://www.nuget.org/packages/Syncfusion.Blazor.FileManager.PhysicalFileProvider) NuGet package is not required. The custom provider manages file operations independently, eliminating the need for additional dependencies. diff --git a/blazor/file-manager/sharePoint-file-provider.md b/blazor/file-manager/sharePoint-file-provider.md index 48fc4724f3..f813fbb842 100644 --- a/blazor/file-manager/sharePoint-file-provider.md +++ b/blazor/file-manager/sharePoint-file-provider.md @@ -1,6 +1,6 @@ --- layout: post -title: SharePoint provider in Blazor File Manager Component | Syncfusion +title: SharePoint Provider in Blazor File Manager Component | Syncfusion description: Checkout and learn here all about SharePoint Provider in Syncfusion Blazor File Manager component and more. platform: Blazor control: File Manager @@ -9,7 +9,7 @@ documentation: ug # SharePoint file provider -The SharePoint file provider allows users to access and manage files within Microsoft SharePoint. To get started, clone the [SharePoint File Provider](https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider) using the following command. +The SharePoint file provider allows access and manage files within Microsoft SharePoint. To begin, clone the [SharePoint File Provider](https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider) using the following command. ``` @@ -29,12 +29,12 @@ To set up the SharePoint service provider, follow these steps: - Note down the **Tenant ID**, **Client ID**, and **Client Secret** from the app registration. 2. **Use Microsoft Graph Instance:** - - With the obtained Tenant ID, Client ID, and Client Secret, you can create a Microsoft Graph instance. + - With the obtained Tenant ID, Client ID, and Client Secret, create a Microsoft Graph instance. - This instance will be used to interact with the SharePoint document library. 3. **Use Details from `appsettings.json`:** - The `SharePointController` is already configured to use the credentials provided in the `appsettings.json` file. - - You only need to provide your `Tenant ID`, `Client ID`, `Client Secret`, `User Site Name`, and `User Drive ID` in the `appsettings.json` file, and the application will automatically initialize the SharePoint service. + - Provide the `Tenant ID`, `Client ID`, `Client Secret`, `User Site Name`, and `User Drive ID` in the `appsettings.json` file, and the application will automatically initialize the SharePoint service. **Example `appsettings.json` Configuration** @@ -56,7 +56,7 @@ To set up the SharePoint service provider, follow these steps: } ``` -Replace "<--User Site Name-->", "<--User Drive ID-->", "tenantId", "clientId", and "clientSecret" with your actual values. +Replace "<--User Site Name-->", "<--User Drive ID-->", "tenantId", "clientId", and "clientSecret" with the actual values. After configuring the SharePoint file provider, 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 Microsoft SharePoint. @@ -76,8 +76,8 @@ After configuring the SharePoint file provider, build and run the project. Now, ``` -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 SharePoint file provider, you need to initialize the SharePoint service 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 SharePoint file provider, initialize the SharePoint service 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 `SharePointProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider/blob/master/Controllers/SharePointController.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 `SharePointProviderController.cs` found at this [link](https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider/blob/master/Controllers/SharePointController.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 SharePoint file provider, refer to this [link](https://github.com/SyncfusionExamples/sharepoint-aspcore-file-provider#key-features) \ No newline at end of file diff --git a/blazor/file-manager/styles.md b/blazor/file-manager/styles.md index 8570f48a7b..b462206223 100644 --- a/blazor/file-manager/styles.md +++ b/blazor/file-manager/styles.md @@ -9,9 +9,9 @@ documentation: ug # Styles and Appearance in Blazor File Manager Component -The following content provides the exact CSS structure that can be used to modify the control's appearance based on the user preference. +The following content provides CSS structures that can be used to modify the component's appearance. -## Customizing the File Manager navigation pane +## Customizing the File Manager Navigation Pane To customize the File Manager navigation pane, use the `.e-navigation` selector and apply styles. @@ -42,9 +42,9 @@ To customize the File Manager navigation pane, use the `.e-navigation` selector ![Blazor File Manager displays Customized Navigation Pane](images/blazor-filemanager-customized-navigation-pane.png) -## Customizing the File Manager thumbnail +## Customizing the File Manager Thumbnail -To customize the thumbnails in the File Manager, you can apply background-image styles to specific CSS selectors that represent different file types, as listed in the table below. +To customize thumbnails in the File Manager, apply `background-image` styles to CSS selectors that represent different file types, as listed below. |File Type|CSS Selector| |----|----| @@ -82,7 +82,7 @@ The following example demonstrates how to customize the File Manager's thumbnail ![Blazor FileManager displays Custom Thumbnail](images/blazor-filemanager-custom-thumbnail.png) -## Customizing the File Manager layout +## Customizing the File Manager Layout To customize the File Manager layout, use the `.e-layout-content` selector and apply styles. @@ -134,7 +134,7 @@ To customize the File Manager toolbar items, use the `.e-toolbar` selector and a ![Blazor FileManager displays Custom Toolbar](images/blazor-filemanager-custom-toolbar.png) -## Customizing the File Manager selected files/folders +## Customizing the File Manager Selected Files/Folders To customize the File Manager selected files/folders, use the below selectors and apply styles. @@ -164,7 +164,7 @@ To customize the File Manager selected files/folders, use the below selectors an ## Customizing the File Manager Dialog -To customize the dialog popup in the File Manager, you can apply styles to specific CSS selectors, as listed in the table below. +To customize the dialog popup in the File Manager, apply styles to CSS selectors, as listed below. |Element|CSS Selector| |---------|------------| diff --git a/blazor/file-manager/toolbar.md b/blazor/file-manager/toolbar.md index 24d02ab3cd..403e87a8bf 100644 --- a/blazor/file-manager/toolbar.md +++ b/blazor/file-manager/toolbar.md @@ -11,9 +11,9 @@ documentation: ug The Toolbar in the File Manager provides a user-friendly interface for performing various file operations. It contains pre-defined items that correspond to specific actions. Here are some key points about the toolbar. -## Built-in Toolbar items +## Built-in Toolbar Items -By default, the File Manager includes several pre-defined toolbar items. These items are ready to use and come with associated actions. This collection can be modified by defining the required items in [FileManagerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerToolbarSettings.html). +By default, the File Manager includes several pre-defined toolbar items that are ready to use and come with associated actions. This collection can be modified by defining the required items in [FileManagerToolbarSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerToolbarSettings.html). Some common built-in toolbar items include: @@ -24,9 +24,9 @@ Some common built-in toolbar items include: * `View` - Specifies the array of string that is used to configure folder items. * `Details` - Specifies the array of string that is used to configure layout items. -## Control Toolbar visibility +## Control Toolbar Visibility -The Toolbar visibility can also be controlled by using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerToolbarSettings.html#Syncfusion_Blazor_FileManager_FileManagerToolbarSettings_Visible) property. Set this property as false to hide the toolbar. You can also toggle this property dynamically based on your application logic. +The Toolbar visibility can be controlled using the [Visible](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerToolbarSettings.html#Syncfusion_Blazor_FileManager_FileManagerToolbarSettings_Visible) property. Set this property to `false` to hide the toolbar. This property can also be toggled dynamically based on application logic. ```cshtml @@ -42,16 +42,19 @@ The Toolbar visibility can also be controlled by using the [Visible](https://hel ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreiXDqgrHomyEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![File Manager Toolbar Visibility](images/toolbar-visible.png) ## Events The Blazor File Manager Toolbar component has a [ToolbarCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_ToolbarCreated) and [ToolbarItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_ToolbarItemClicked) events that can be triggered for certain actions. These events can be bound to the File Manager using the **FileManagerEvents**, which requires the **TValue** to be provided. -N> All the events should be provided in a single **FileManagerEvents** component. +N> All events should be provided within a single **FileManagerEvents** component. ### ToolbarCreated -The [ToolbarCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_ToolbarCreated) event of the Blazor File Manager component is triggered before creating the toolbar items. +The [ToolbarCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_ToolbarCreated) event of the Blazor File Manager component is triggered before the toolbar items are created. ```cshtml @@ -77,7 +80,7 @@ The [ToolbarCreated](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.Fil ### ToolbarItemClicked -The [ToolbarItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_ToolbarItemClicked) event of the Blazor File Manager component is triggered when the toolbar item is clicked. +The [ToolbarItemClicked](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerEvents-1.html#Syncfusion_Blazor_FileManager_FileManagerEvents_1_ToolbarItemClicked) event of the Blazor File Manager component is triggered when a toolbar item is clicked. ```cshtml diff --git a/blazor/file-manager/upload.md b/blazor/file-manager/upload.md index 822c2be5a3..818d008969 100644 --- a/blazor/file-manager/upload.md +++ b/blazor/file-manager/upload.md @@ -37,13 +37,15 @@ N> When `DirectoryUpload` is set to `true`, only folders can be uploaded. When i The screenshot below shows after successfully selecting a directory it uploads all the file inside it automatically. This demonstrates how the `DirectoryUpload` property works in the Blazor File Manager component. +{% previewsample "https://blazorplayground.syncfusion.com/embed/VtreiXDqgrHomyEn?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + ![Blazor File Manager with DirectoryUpload](images/blazor-filemanager-directoryupload.png) ## Chunk Upload The [ChunkSize](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_ChunkSize) property specifies the size of each chunk when uploading large files. It divides the file into smaller parts, which are uploaded sequentially to the server -This property allows you to enable chunked uploads for large files by specifying a `ChunkSize`. +This property allows enabling chunked uploads for large files by specifying a `ChunkSize`. By specifying a `ChunkSize`, the large file is divided into smaller parts, reducing the load on the network and making the upload process more efficient. @@ -71,7 +73,7 @@ With chunk upload, the pause and resume options gives users enhanced control ove The [AutoUpload](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_AutoUpload) property controls whether files are automatically uploaded when they are added to the upload queue in the File Manager component. -The default value is `true`, the File Manager will automatically upload files as soon as they are added to the upload queue. If set to `false`, the files will not be uploaded automatically, giving you the chance to manipulate the files before uploading them to the server. +The default value is `true`. If `AutoUpload` is set to `true`, the File Manager will automatically upload files as soon as they are added to the upload queue. If set to `false`, the files will not be uploaded automatically, giving a chance to manipulate the files before uploading them to the server. ```cshtml @@ -117,11 +119,11 @@ The default value is set to `false`, the upload dialog remains open even after t The [AllowedExtensions](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_AllowedExtensions) property specifies which file types are allowed for upload in the File Manager component by defining their extensions. -This property lets you define which file types can be uploaded by specifying allowed extensions, separated by commas. For example, to allow only image files, you would set the `AllowedExtensions` property to .jpg,.png. +This property lets define which file types can be uploaded by specifying allowed extensions, separated by commas. For example, to allow only image files, set the `AllowedExtensions` property to `.jpg,.png`. -By setting the `AllowedExtensions` property, you restrict the file types that can be uploaded. Only files with the specified extensions will be accepted. +By setting the `AllowedExtensions` property, file types that can be uploaded are restricted. Only files with the specified extensions will be accepted. -If you want to allow only image files like .jpg and .png, you would set the property as follows: +If it is desired to allow only image files like `.jpg` and `.png`, set the property as follows: ```cshtml @@ -143,10 +145,11 @@ If you want to allow only image files like .jpg and .png, you would set the prop The [UploadMode](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_UploadMode) property defines the method used to perform the upload operation in the File Manager component. -This property lets you choose between two upload modes. `FormSubmit` Uses the traditional form submission method for file uploads. -`HttpClient` uses the HttpClient instance for the upload, providing more control over the request. +This property lets choose between two upload modes: +* `FormSubmit`: Uses the traditional form submission method for file uploads. +* `HttpClient`: Uses the HttpClient instance for the upload, providing more control over the request. -By default, the `UploadMode` is set to `FormSubmit`, but you can switch to HttpClient for more control, such as managing headers or authorizing the upload response. +By default, the `UploadMode` is set to `FormSubmit`, but it can be switched to `HttpClient` for more control, such as managing headers or authorizing the upload response. {% tabs %} {% highlight razor %} @@ -237,7 +240,7 @@ namespace Blazor ## Drag and Drop upload -The Blazor File Manager component allows you to easily perform drag and drop file uploads. You can drag files from your local file system and drop them directly into the FileManager. Additionally, you have the ability to customize the drop area for file uploads using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_DropArea) property in the [FileManagerUploadSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html) class. +The Blazor File Manager component allows easy drag-and-drop file uploads. Files can be dragged from the local file system and dropped directly into the FileManager. Additionally, the drop area for file uploads can be customized using the [DropArea](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html#Syncfusion_Blazor_FileManager_FileManagerUploadSettings_DropArea) property in the [FileManagerUploadSettings](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerUploadSettings.html) class. ```cshtml @@ -254,7 +257,7 @@ The Blazor File Manager component allows you to easily perform drag and drop fil ``` -## See also +## See Also * [Set min and max file size in upload](https://blazor.syncfusion.com/documentation/file-manager/how-to/upload-large-files) diff --git a/blazor/file-manager/views.md b/blazor/file-manager/views.md index 45f6050412..7e75b420fa 100644 --- a/blazor/file-manager/views.md +++ b/blazor/file-manager/views.md @@ -57,6 +57,10 @@ To add a custom column to the details view, use the [FileManagerColumn](https:// ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LZBoiXjqUSsGZyUL?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Blazor File Manager with custom column](images/custom-column.png) + ### Customize existing column format The details view settings like, column [Width](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerColumn.html#Syncfusion_Blazor_FileManager_FileManagerColumn_Width), [Format](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerColumn.html#Syncfusion_Blazor_FileManager_FileManagerColumn_Format), [HeaderText](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerColumn.html#Syncfusion_Blazor_FileManager_FileManagerColumn_HeaderText), [Template](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerColumn.html#Syncfusion_Blazor_FileManager_FileManagerColumn_Template) for each field can be customized using [FileManagerColumn](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.FileManagerColumn.html) property. @@ -89,4 +93,7 @@ The details view settings like, column [Width](https://help.syncfusion.com/cr/bl ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/VDhysttqgIKRGAWb?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} + +![Customize column in File Manager ](images/customize-column.png) diff --git a/blazor/file-manager/virtualization.md b/blazor/file-manager/virtualization.md index 85edd69d88..f85bed3d5d 100644 --- a/blazor/file-manager/virtualization.md +++ b/blazor/file-manager/virtualization.md @@ -9,9 +9,9 @@ documentation: ug # Virtualization in Blazor File Manager Component -File Manager’s UI virtualization allows you for the dynamic loading of a large number of directories and files in both the ViewType of [Details](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_Details) and [LargeIcons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_LargeIcons) without degrading its performance. The virtualization of the File Manager component is based on the height and width of the viewport. The items will be loaded in both **Details** and **LargeIcons** based on the viewport size. +File Manager’s UI virtualization allows the dynamic loading of a large number of directories and files in both the [Details](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_Details) and [LargeIcons](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.ViewType.html#Syncfusion_Blazor_FileManager_ViewType_LargeIcons) ViewType without degrading performance. The virtualization of the File Manager component is based on the height and width of the viewport. The items will be loaded in both **Details** and **LargeIcons** based on the viewport size. -In order to enable virtualization, you must set the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableVirtualization) to true. +To enable virtualization, set the [EnableVirtualization](https://help.syncfusion.com/cr/blazor/Syncfusion.Blazor.FileManager.SfFileManager-1.html#Syncfusion_Blazor_FileManager_SfFileManager_1_EnableVirtualization) property to `true`. Here is a sample demonstrating Virtualization enabled in the **Details** ViewType. @@ -29,6 +29,7 @@ Here is a sample demonstrating Virtualization enabled in the **Details** ViewTyp ``` +{% previewsample "https://blazorplayground.syncfusion.com/embed/LXVesNNUUoxPrHKf?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %} The below GIF demonstrates the file loading when virtualization is enabled, a sizable collection of files can be found in the folders **Documents** and **Text Documents**..