Implement the Syncfusion ASP.NET Core File Manager component for file browsing, management, and organization. Use this when building file browsers, implementing file operations (upload/download), customizing toolbars and context menus, enabling drag-and-drop, and configuring data binding for file systems. This skill covers file access, file events, search and filtering, and layout customization.
The Syncfusion File Manager is a comprehensive, production-ready component for file browsing, management, and organization in web applications. It provides users with an explorer-like interface to navigate file systems, perform file operations (create, rename, delete, copy, move, upload, download), manage file organization, search and filter content, control access permissions, and handle large datasets efficiently through virtualization.
using Microsoft.AspNetCore.Mvc;
using Syncfusion.EJ2.FileManager;
public class FileManagerController : Controller
{
public IActionResult Index()
{
return View();
}
[HttpPost]
public IActionResult FileManager(string action, string path)
{
// Handle file operations based on action parameter
if (action == "read")
{
// Return list of files and folders for the given path
return Ok(new {
cwd = new { name = "Root", hasChild = true, filterPath = "/" },
files = new object[] { },
error = (object)null,
details = (object)null
});
}
return Ok();
}
}
<ejs-filemanager id="filemanager"
path="/"
width="100%"
height="400px"
allowDragAndDrop="true"
allowMultiSelection="true"
showThumbnail="true"
enablePersistence="true">
<e-filemanager-ajaxsettings url="/FileManager/FileManager"
downloadUrl="/FileManager/Download"
uploadUrl="/FileManager/Upload"
getImageUrl="/FileManager/GetImage">
</e-filemanager-ajaxsettings>
</ejs-filemanager>
Navigate to the appropriate reference file based on your implementation needs:
📄 Read: references/getting-started.md
📄 Read: references/file-operations.md
📄 Read: references/file-upload.md
📄 Read: references/drag-and-drop.md
📄 Read: references/views-overview.md
📄 Read: references/selection-modes.md
📄 Read: references/search-sort-filter.md
📄 Read: references/context-menu.md
📄 Read: references/file-events.md
📄 Read: references/virtualization.md
📄 Read: references/security-basics.md
📄 Read: references/server-integration.md
View Code (Index.cshtml):
<ejs-filemanager id="filemanager"
path="/"
width="100%"
height="400px">
<e-filemanager-ajaxsettings url="/FileManager/FileManager"
uploadUrl="/FileManager/Upload"
downloadUrl="/FileManager/Download"
getImageUrl="/FileManager/GetImage">
</e-filemanager-ajaxsettings>
<e-filemanager-toolbarsettings items="@new string[] {'NewFolder', 'Upload', 'Cut', 'Copy', 'Paste', 'Delete', 'Download', 'Rename', 'Refresh'}">
</e-filemanager-toolbarsettings>
<e-filemanager-contextmenusettings file="@new string[] {'Open', 'Delete', 'Rename', 'Download', 'Details'}"
folder="@new string[] {'Open', 'Delete', 'Rename', 'Download', 'Details'}"
layout="@new string[] {'SortBy', 'View', 'Refresh', 'NewFolder', 'Upload'}">
</e-filemanager-contextmenusettings>
</ejs-filemanager>
View Code (Index.cshtml):
<ejs-filemanager id="filemanager" path="/">
<e-filemanager-ajaxsettings url="/FileManager/FileManager"
uploadUrl="/FileManager/Upload">
</e-filemanager-ajaxsettings>
<e-filemanager-uploadsettings autoUpload="true"
allowedExtensions=".jpg,.png,.pdf,.doc,.docx"
minFileSize="1024"
maxFileSize="5242880">
</e-filemanager-uploadsettings>
</ejs-filemanager>
View Code (Index.cshtml):
<ejs-filemanager id="filemanager" view="Details">
<e-filemanager-ajaxsettings url="/FileManager/FileManager">
</e-filemanager-ajaxsettings>
<e-filemanager-detailsviewsettings>
<e-filemanager-detailsviewsettings-columns>
<e-detailsviewcolumn field="name" headerText="Name" minWidth="150" width="200"></e-detailsviewcolumn>
<e-detailsviewcolumn field="_fm_modified" headerText="Date Modified" type="dateTime" minWidth="120" width="150"></e-detailsviewcolumn>
<e-detailsviewcolumn field="size" headerText="Size" minWidth="90" width="120"></e-detailsviewcolumn>
</e-filemanager-detailsviewsettings-columns>
</e-filemanager-detailsviewsettings>
</ejs-filemanager>
View Code (Index.cshtml):
<button onclick="selectAllAndDelete()">Select All & Delete</button>
<ejs-filemanager id="filemanager">
<e-filemanager-ajaxsettings url="/FileManager/FileManager">
</e-filemanager-ajaxsettings>
</ejs-filemanager>
<script>
function selectAllAndDelete() {
var filemanager = document.getElementById('filemanager').ej2_instances[0];
filemanager.selectAll();
var selected = filemanager.getSelectedFiles();
var names = selected.map(function(f) { return f.name; });
filemanager.deleteFiles(names);
}
</script>
View Code (Index.cshtml):
<ejs-filemanager id="filemanager" search="onSearch">
<e-filemanager-ajaxsettings url="/FileManager/FileManager">
</e-filemanager-ajaxsettings>
<e-filemanager-searchsettings allowSearchOnTyping="true"
filterType="contains"
ignoreCase="true">
</e-filemanager-searchsettings>
</ejs-filemanager>
<script>
function onSearch(args) {
console.log('Search query:', args.searchString);
}
</script>
View Code (Index.cshtml):
<ejs-filemanager id="filemanager"
allowDragAndDrop="true"
fileDragStart="onFileDragStart"
fileDragStop="onFileDragStop"
fileDropped="onFileDropped">
<e-filemanager-ajaxsettings url="/FileManager/FileManager"
uploadUrl="/FileManager/Upload">
</e-filemanager-ajaxsettings>
<e-filemanager-uploadsettings autoUpload="true"
allowedExtensions=".jpg,.png,.pdf">
</e-filemanager-uploadsettings>
</ejs-filemanager>
<script>
function onFileDragStart(args) {
console.log('Drag started:', args.fileDetails);
}
function onFileDragStop(args) {
console.log('Drag stopped');
}
function onFileDropped(args) {
console.log('File dropped:', args.fileDetails);
}
</script>
View Code (Index.cshtml):
<ejs-filemanager id="filemanager"
beforeDelete="beforeDelete"
delete="onDelete"
beforeSend="beforeSend">
<e-filemanager-ajaxsettings url="/FileManager/FileManager">
</e-filemanager-ajaxsettings>
</ejs-filemanager>
<script>
function beforeDelete(args) {
console.log('Before delete:', args.fileDetails);
// Validate or prevent deletion
var isReadOnly = args.fileDetails.some(function(f) { return f.isReadOnly; });
if (isReadOnly) {
args.cancel = true;
}
}
function onDelete(args) {
console.log('File deleted:', args.fileDetails);
// Update UI or log action
}
function beforeSend(args) {
// Add custom headers
args.ajaxSettings.headers = args.ajaxSettings.headers || {};
args.ajaxSettings.headers['Authorization'] = 'Bearer ' + getToken();
}
</script>
View Code (Index.cshtml):
<ejs-filemanager id="filemanager"
enableVirtualization="true"
height="600px"
width="100%">
<e-filemanager-ajaxsettings url="/FileManager/FileManager">
</e-filemanager-ajaxsettings>
</ejs-filemanager>
View Code (Index.cshtml):
<ejs-filemanager id="filemanager"
enablePersistence="true">
<e-filemanager-ajaxsettings url="/FileManager/FileManager">
</e-filemanager-ajaxsettings>
</ejs-filemanager>
<!-- Persists: view type, current path, selected items -->
View Code (Index.cshtml):
<ejs-filemanager id="filemanager"
locale="ar-AE"
enableRtl="true">
<e-filemanager-ajaxsettings url="/FileManager/FileManager">
</e-filemanager-ajaxsettings>
</ejs-filemanager>
Essential Configuration:
ajaxSettings - Server communication endpoints (url, uploadUrl, downloadUrl, getImageUrl)path - Current directory pathwidth / height - Component dimensionsview - Display mode (LargeIcons or Details)allowDragAndDrop - Enable drag-and-drop functionalityallowMultiSelection - Enable multiple file selectionshowThumbnail - Display image thumbnailsUpload Settings:
uploadSettings.autoUpload - Automatically upload filesuploadSettings.allowedExtensions - Restrict file typesuploadSettings.maxFileSize - Maximum file size limituploadSettings.directoryUpload - Enable folder uploadsuploadSettings.sequentialUpload - Upload files one by oneCustomization:
toolbarSettings - Configure toolbar items and visibilitycontextMenuSettings - Configure context menu for different contextsnavigationPaneSettings - Configure left sidebardetailsViewSettings - Configure columns in details viewsearchSettings - Configure search behaviorAdvanced:
enableVirtualization - Optimize rendering for large listsenablePersistence - Remember user preferencesenableRtl - Right-to-left layout supportcssClass - Apply custom CSS stylingshowFileExtension - Display file extensionsshowHiddenItems - Show/hide hidden filesshowItemCheckBoxes - Display checkboxes for selectionUse Case 1: Document Management System
Use Case 2: Image Gallery Manager
Use Case 3: Content Administration
Use Case 4: Cloud Storage Client