SQL.razor

@page "/file-manager/sql-server-provider"

@using Syncfusion.Blazor.FileManager;

@inject IJSRuntime JsRuntime;

@*Hidden:Lines*@
@inherits SampleBaseComponent
@inject NavigationManager NavigationManager
<PageTitle>Blazor File Manager SQL Database Provider Example - Syncfusion Demos</PageTitle>
<HeadContent>
	<meta name="description" content="This example demonstrates the SQL Database Provider in Blazor File Manager Component. Explore here for more details." />
	<link rel="canonical" href="@canonicalURL" />
</HeadContent>
@*End:Hidden*@

<SampleDescription>
	<p>This sample demonstrates how to use the <a target="_blank" href="https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider">SQL server file system provider</a> with the File Manager component to perform file operations. This supports all basic file operations such as create, rename, delete, refresh and more. </p>
</SampleDescription>
<ActionDescription>
	<p>This sample explains the SQL database file system provider that allows users to manage the file system stored in a SQL database table. Unlike other file system providers, it works on an ID basis, where each file and folder has a unique ID that is used for all file operations. To run the service, you need to configure the connection to your SQL server database using the <code>SetSQLConnection</code> method.</p>
	<p>Checkout this <a target="_blank" href="https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider">SQL server file system provider </a> from the GitHub repository.</p>
	<p>Make the SQL server connection with SQL database file <a target="_blank" href="https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider/tree/master/App_Data">(App_Data/FileManager.mdf)</a> and specify the connection string in <code>Web.config</code> file.</p>
	<p>Also need to add the entry for the connection string in the <a target="_blank" href="https://github.com/SyncfusionExamples/sql-server-database-aspcore-file-provider/blob/master/appsettings.json">appsettings.json</a> file.</p>
	<p>Provide the details such as the <code>connection name</code>, <code>table name</code>, and <code>table ID</code> value by passing these values to the <code>SetSQLConnection</code> method. This method Sets the SQLConnection string, table name, and table ID to perform the file operations in the File Manager component.</p>
</ActionDescription>

<div class="control-section">
	@* Initialization of File Manager component with SQL server file provider *@
	<SfFileManager TValue="FileManagerDirectoryContent" ShowFileExtension="false" Height="500px">
		<FileManagerAjaxSettings Url="https://ng2jq.syncfusion.com/ej2-sql-service/api/FileManager/Fileoperations"
								 UploadUrl="https://ng2jq.syncfusion.com/ej2-sql-service/api/FileManager/Upload"
								 DownloadUrl="https://ng2jq.syncfusion.com/ej2-sql-service/api/FileManager/Download"
								 GetImageUrl="https://ng2jq.syncfusion.com/ej2-sql-service/api/FileManager/GetImage">
		</FileManagerAjaxSettings>
		<FileManagerToolbarSettings ToolbarItems="@Items"></FileManagerToolbarSettings>
		<FileManagerContextMenuSettings Layout="@LayoutItems" Visible="true"></FileManagerContextMenuSettings>
	</SfFileManager>
</div>

@*Hidden:Lines*@
@code {
    private string canonicalURL { get; set; }

    protected override void OnInitialized()
    {
        canonicalURL = NavigationManager.Uri.Split("?")[0];
    }
	public List<ToolBarItemModel> Items = new List<ToolBarItemModel>()
	{
		new ToolBarItemModel() { Name = "NewFolder" },
		new ToolBarItemModel() { Name = "Cut" },
		new ToolBarItemModel() { Name = "Copy" },
		new ToolBarItemModel() { Name = "Paste" },
		new ToolBarItemModel() { Name = "Delete" },
		new ToolBarItemModel() { Name = "Rename" },
		new ToolBarItemModel() { Name = "SortBy" },
		new ToolBarItemModel() { Name = "Refresh" },
		new ToolBarItemModel() { Name = "Selection" },
		new ToolBarItemModel() { Name = "View" },
		new ToolBarItemModel() { Name = "Details" },
	};
	public string[] LayoutItems = new string[] { "SortBy", "View", "Refresh", "|", "Paste", "|", "NewFolder", "|", "Details", "|", "SelectAll" };
}
<style>
	.bootstrap5 .e-filemanager .e-large-icons .e-list-img, .bootstrap5-dark .e-filemanager .e-large-icons .e-list-img,
	.bootstrap4 .e-filemanager .e-large-icons .e-list-img {
		border: none !important;
	}

	.control-section {
		min-height: 550px;
	}
</style>
@*End:Hidden*@