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

using AspNetCoreFileManager.Extensions;

var builder = WebApplication.CreateBuilder(args);

// Configure File Manager service
var filesPath = Path.Combine(builder.Environment.ContentRootPath, "Files");
builder.Services.AddFileManager(filesPath);

builder.Services.AddControllersWithViews();

var app = 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) -->
    <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet">
    
    <!-- Font Awesome (required for icons) -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    
    <!-- File Manager CSS -->
    <link rel="stylesheet" href="~/lib/aspnetcorefilemanager/css/filemanager.css">
</head>

<body>
    <!-- Your content -->
    
    <!-- Bootstrap JS -->
    <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js"></script>
    
    <!-- File Manager JS (Merged: core + events + utils + zip + destroy) -->
    <script src="~/lib/aspnetcorefilemanager/js/filemanager.js"></script>
    
    <!-- Optional: File Manager i18n (only if you need localization) -->
    <script src="~/lib/aspnetcorefilemanager/js/filemanager-i18n.js"></script>
</body>

3. Add to Your View

<!-- Simple usage with Tag Helper -->
<file-manager id="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-manager 
    id="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:

var fileManager = new FileManager('#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 handlers
fileManager.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:

public class AzureBlobFileManagerService : IFileManagerService
{
    // Implement all interface methods
    // Use Azure Blob Storage instead of physical file system
    
    public FileManagerResponse GetFiles(string path, bool showHiddenItems = false, string[]? filter = null)
    {
        // Your Azure Blob Storage implementation
    }
    
    // ... other methods
}

// Register in Program.cs
builder.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-manager 
    id="minimal" 
    show-toolbar="false" 
    show-navigation="false"
    show-context-menu="false">
</file-manager>

Example 2: RTL File Manager

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

Example 3: Persistent File Manager

<file-manager 
    id="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: [email protected]
🐛 Issues: GitHub Issues
📖 Documentation: Full Documentation

🗺️ Roadmap

Made with ❤️ for the ASP.NET Core community

Name		Name	Last commit message	Last commit date
Latest commit History 6 Commits
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

License

delphiassistant/AspNetCoreFileManager

Folders and files

Latest commit

History

Repository files navigation