ASP.NET Core File Manager

A modern, full-featured file manager component for ASP.NET Core applications. Built from scratch without external dependencies, featuring a beautiful Bootstrap 5-based UI with comprehensive file management capabilities.

✨ Features

Core Functionality

✅ Full File Operations - Create, rename, delete, copy, and move files and folders
✅ File Upload - Drag-and-drop support with progress tracking
✅ File Download - Download single files or multiple files as ZIP archive
✅ ZIP Operations - Create ZIP archives and extract ZIP files
✅ Image Preview - Built-in modal viewer for image files
✅ Search - Fast file and folder search with case-sensitive option
✅ Breadcrumb Navigation - Easy navigation through folder hierarchy

UI Components

✅ Toolbar - Quick access to common operations
✅ Navigation Pane - Tree view of folder structure
✅ Multiple Views - Switch between Large Icons and Details view
✅ Context Menu - Right-click menu for quick actions
✅ Sortable Columns - Sort files by name, date, type, or size

Advanced Features

✅ Multi-Selection - Select and operate on multiple files at once
✅ State Persistence - Remember view mode and path on page reload
✅ RTL Support - Full right-to-left layout for Arabic/Persian/Hebrew
✅ Responsive Design - Works perfectly on desktop, tablet, and mobile
✅ Dark Mode - Automatic dark mode support
✅ Extensible - Easy to customize and extend

📦 Installation

Via NuGet Package Manager

Install-Package AspNetCoreFileManager

Via .NET CLI

dotnet add package AspNetCoreFileManager

🚀 Quick Start

1. Configure in Program.cs

usingAspNetCoreFileManager.Extensions;varbuilder=WebApplication.CreateBuilder(args);// Configure File Manager servicevarfilesPath=Path.Combine(builder.Environment.ContentRootPath,"Files");builder.Services.AddFileManager(filesPath);builder.Services.AddControllersWithViews();varapp=builder.Build();app.UseStaticFiles();app.UseRouting();app.MapControllerRoute(name:"default",pattern:"{controller=Home}/{action=Index}/{id?}");app.Run();

2. Add Required Assets to Layout

<!-- In your _Layout.cshtml --><head><!-- Bootstrap 5 (required) --><linkhref="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css" rel="stylesheet"><!-- Font Awesome (required for icons) --><linkrel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css"><!-- File Manager CSS --><linkrel="stylesheet" href="~/lib/aspnetcorefilemanager/css/filemanager.css"></head><body><!-- Your content --><!-- Bootstrap JS --><scriptsrc="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script><!-- File Manager JS (Merged: core + events + utils + zip + destroy) --><scriptsrc="~/lib/aspnetcorefilemanager/js/filemanager.js"></script><!-- Optional: File Manager i18n (only if you need localization) --><scriptsrc="~/lib/aspnetcorefilemanager/js/filemanager-i18n.js"></script></body>

3. Add to Your View

<!-- Simple usage with Tag Helper --><file-managerid="myFileManager" path="/" view="largeicons"></file-manager>

That's it! You now have a fully functional file manager.

📖 Documentation

Installation Guides

Choose the installation method that works best for you:

🎯 Quick Start (2 minutes)

QUICK_START_VS.md - Fast setup with Visual Studio

📦 NuGet Package Installation (Recommended)

VISUAL_STUDIO_INSTALLATION_GUIDE.md - Complete Visual Studio guide
- Add local package source
- Install via Package Manager
- Build and verify
- Troubleshooting tips

🔧 Manual Installation (For Customization)

MANUAL_INSTALLATION.md - ⭐ NEW! Complete manual setup guide
- Copy CSS/JS files without NuGet
- PowerShell and Bash scripts included
- Project reference setup (source + DLL)
- Update scripts with backup
- Perfect for customization and development

Version & Migration Guides

CHANGELOG.md - Complete version history and changes
docs/MIGRATION_v1.0.5.md - Migrate from v1.0.4 to v1.0.5 (merged JS files)

Feature Documentation

docs/features/ZIP_OPERATIONS.md - ZIP creation and extraction guide
docs/guides/LOCALIZATION.md - Multi-language support (English/Persian)
docs/guides/NUGET_PACKAGE.md - Package creation and publishing guide

Troubleshooting & Support

docs/TROUBLESHOOTING.md - Common issues and solutions
docs/README.md - Complete documentation index

Package Status & Testing

PACKAGE_WORKING_v1.0.7.md - Latest package status and test results
TEST_FIXES_SUMMARY.md - Recent test fixes and improvements
test-package-install.ps1 - Automated testing script

Persian Documentation

README_FA.md - Complete Persian documentation (مستندات فارسی)

Tag Helper Usage

The easiest way to use the file manager is with the Tag Helper:

<file-managerid="myFileManager" path="/Documents" view="details"
height="600px"
allow-drag-drop="true"
allow-multi-selection="true"
show-toolbar="true"
show-navigation="true"
show-context-menu="true"
enable-persistence="true"
enable-rtl="false"></file-manager>

JavaScript API Usage

For more control, you can create instances programmatically:

varfileManager=newFileManager('#myElement',{path: '/Documents',view: 'largeicons',allowDragAndDrop: true,allowMultiSelection: true,showFileExtension: true,showHiddenItems: false,enablePersistence: true,enableRtl: false,ajaxSettings: {url: '/api/FileManager/FileOperations',uploadUrl: '/api/FileManager/Upload',downloadUrl: '/api/FileManager/Download',getImageUrl: '/api/FileManager/GetImage'},toolbarSettings: {visible: true,items: ['NewFolder','Upload','Delete','Download','Rename','Refresh','View','Details']},navigationPaneSettings: {visible: true,minWidth: '200px',maxWidth: '400px'},contextMenuSettings: {visible: true,items: ['Open','|','Cut','Copy','Paste','Delete','Rename','|','Details']}});// Event handlersfileManager.on('success',function(e){console.log('Operation succeeded:',e);});fileManager.on('failure',function(e){console.error('Operation failed:',e);});

Configuration Options

Option	Type	Default	Description
`path`	string	"/"	Initial path to display
`view`	string	"largeicons"	View mode: "largeicons" or "details"
`allowDragAndDrop`	bool	true	Enable drag-and-drop upload
`allowMultiSelection`	bool	true	Allow multiple file selection
`showFileExtension`	bool	true	Show file extensions
`showHiddenItems`	bool	false	Show hidden files
`showThumbnail`	bool	true	Show image thumbnails
`enablePersistence`	bool	false	Save state on reload
`enableRtl`	bool	false	Enable RTL layout

See the full API reference for all options.

🎨 Customization

Custom Styling

You can override the default styles by adding your own CSS:

/* Custom toolbar background */
.filemanager-toolbar {
background-color:#your-color;
}
/* Custom file item hover color */
.file-item:hover {
background-color:#your-color;
}

Custom File Provider

Implement your own file provider for cloud storage or database:

publicclassAzureBlobFileManagerService:IFileManagerService{// Implement all interface methods// Use Azure Blob Storage instead of physical file systempublicFileManagerResponseGetFiles(stringpath,boolshowHiddenItems=false,string[]?filter=null){// Your Azure Blob Storage implementation}// ... other methods}// Register in Program.csbuilder.Services.AddFileManager<AzureBlobFileManagerService>();

📱 Browser Support

✅ Chrome (latest)
✅ Firefox (latest)
✅ Safari (latest)
✅ Edge (latest)
✅ Mobile browsers (iOS Safari, Chrome Mobile)

🧪 Running Tests

dotnet test

🎯 Examples

Example 1: Minimal File Browser

<file-managerid="minimal" show-toolbar="false" show-navigation="false"
show-context-menu="false"></file-manager>

Example 2: RTL File Manager

<file-managerid="rtl" enable-rtl="true" path="/"></file-manager>

Example 3: Persistent File Manager

<file-managerid="persistent" enable-persistence="true" path="/Documents"></file-manager>

📂 Project Structure

AspNetCoreFileManager/
├── src/
│ └── AspNetCoreFileManager/ # Main library
│ ├── Controllers/ # API controllers
│ ├── Models/ # Data models
│ ├── Services/ # Business logic
│ ├── TagHelpers/ # Tag helper implementation
│ ├── Extensions/ # Service extensions
│ └── wwwroot/ # Static assets
│ ├── css/ # Stylesheets
│ │ └── filemanager.css
│ ├── js/ # JavaScript files
│ │ ├── filemanager.js # Main JS (merged: core + events + utils + zip + destroy)
│ │ └── filemanager-i18n.js # Optional: Localization
│ └── locales/ # Translation files
│ ├── en.json # English translations
│ └── fa.json # Persian translations
├── samples/
│ └── AspNetCoreFileManager.Demo/ # Demo application
├── tests/
│ └── AspNetCoreFileManager.Tests/ # Unit tests
├── docs/ # Documentation
└── README.md

🤝 Contributing

Contributions are welcome! Please feel free to submit a Pull Request.

Fork the repository
Create your feature branch (git checkout -b feature/amazing-feature)
Commit your changes (git commit -m 'Add some amazing feature')
Push to the branch (git push origin feature/amazing-feature)
Open a Pull Request

📄 License

This project is licensed under the MIT License - see the LICENSE file for details.

🙏 Acknowledgments

Built with ASP.NET Core 8.0
UI design inspired by modern file managers
Icons by Font Awesome
Styling with Bootstrap 5

📞 Support

📧 Email: support@example.com
🐛 Issues: GitHub Issues
📖 Documentation: Full Documentation

🗺️ Roadmap

Made with ❤️ for the ASP.NET Core community

Name		Name	Last commit message	Last commit date
docs		docs
samples/AspNetCoreFileManager.Demo		samples/AspNetCoreFileManager.Demo
src/AspNetCoreFileManager		src/AspNetCoreFileManager
tests/AspNetCoreFileManager.Tests		tests/AspNetCoreFileManager.Tests
.gitattributes		.gitattributes
.gitignore		.gitignore
AspNetCoreFileManager.sln		AspNetCoreFileManager.sln
CHANGELOG.md		CHANGELOG.md
CONTRIBUTING.md		CONTRIBUTING.md
DOCS_UPDATE_SUMMARY_JS.md		DOCS_UPDATE_SUMMARY_JS.md
DOCUMENTATION_CLEANUP_SUMMARY.md		DOCUMENTATION_CLEANUP_SUMMARY.md
LICENSE		LICENSE
MANUAL_INSTALLATION.md		MANUAL_INSTALLATION.md
MANUAL_INSTALLATION_SUMMARY.md		MANUAL_INSTALLATION_SUMMARY.md
README.md		README.md
README_FA.md		README_FA.md
README_UPDATE_SUMMARY.md		README_UPDATE_SUMMARY.md
TEST_FIXES_SUMMARY.md		TEST_FIXES_SUMMARY.md
build.ps1		build.ps1
build.sh		build.sh
nuget.config		nuget.config
test-package-install.ps1		test-package-install.ps1

Latest commit

History

Folders and files

Repository files navigation