984382: Updated the UG document for file manager

Author: praveensf4999

blazor/file-manager/drag-and-drop.md

@@ -27,11 +27,11 @@ The events which trigger when using drag and drop functionality are listed below
 @using Syncfusion.Blazor.FileManager
 
 <SfFileManager AllowDragAndDrop="true" TValue="FileManagerDirectoryContent">
-    <FileManagerAjaxSettings  Url="/api/SampleData/FileOperations"
-                                UploadUrl="/api/SampleData/Upload"
-                                DownloadUrl="/api/SampleData/Download"
-                                GetImageUrl="/api/SampleData/GetImage">
-    </FileManagerAjaxSettings>
+        <FileManagerAjaxSettings Url="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/FileOperations"
+                                 UploadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Upload"
+                                 DownloadUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/Download"
+                                 GetImageUrl="https://ej2-aspcore-service.azurewebsites.net/api/FileManager/GetImage">
+        </FileManagerAjaxSettings>
 </SfFileManager>
 
 ```
@@ -40,5 +40,5 @@ The events which trigger when using drag and drop functionality are listed below
 
 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)

blazor/file-manager/file-operations.md

@@ -681,6 +681,9 @@ The available options for the sort order are:
 
 ```
 
+{% 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.

blazor/file-manager/images/custom-column.png

@@ -30,7 +30,7 @@ The File Manager allows the selection of multiple files by enabling the [`AllowM
 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

blazor/file-manager/images/customize-column.png

@@ -36,6 +36,9 @@ The following example demonstrates how to change the page size of a File Manager
     <FileManagerPageSettings PageSize="3"></FileManagerPageSettings>
 </SfFileManager>
 ````
+
+{% 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)
@@ -84,6 +87,8 @@ The following example demonstrates how to implement the `CurrentPage` property.
     </FileManagerPageSettings>
 </SfFileManager>
 ````
+{% 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)
@@ -124,6 +129,7 @@ Below is an example on how to customize pagination in the Syncfusion<sup style="
 }
 
 ````
+{% previewsample "https://blazorplayground.syncfusion.com/embed/BjBSsNZgAUtSBvRN?appbar=false&editor=false&result=true&errorlist=false&theme=bootstrap5" %}
 
 The screenshot below shows the Blazor File Manager component with a custom pagination button.
 
@@ -149,6 +155,7 @@ Here is a sample demonstrating how `PageSizes` property is used when Pagination
     </SfFileManager>
 
 ```
+{% 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.
 

blazor/file-manager/images/sorting.png

@@ -42,6 +42,9 @@ The Toolbar visibility can be controlled using the [Visible](https://help.syncfu
 </SfFileManager>
 
 ```
+{% 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
 

blazor/file-manager/images/toolbar-visible.png

@@ -37,6 +37,8 @@ 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