NTK CMS File Manager

ntk-cms-filemanager - Advanced file management system with tree-based navigation and multi-language support

📋 Overview

The NTK CMS File Manager is a comprehensive file management component that provides tree-based file navigation, drag & drop operations, file preview, and multi-language support. It's designed for modern web applications that require robust file management capabilities.

🚀 Installation

``bash
npm install ntk-cms-filemanager
`

📦 Features

$3

- Tree-based Navigation - Hierarchical file and folder structure
- Drag & Drop Operations - Intuitive file management
- File Preview - Preview files before operations
- Multi-language Support - English, Persian, French, Russian
- Upload Progress Tracking - Real-time upload status
- File Validation - Type and size validation
- Customizable UI - Theme and style customization

$3

- Folder Content Viewer - Display folder contents
- Tree Navigation - Hierarchical file tree
- Navigation Bar - Breadcrumb navigation
- Side View Panel - Additional file information
- Upload Component - File upload interface
- Loading Overlay - Loading indicators

🔧 Usage

$3

`typescript
import { NgModule } from "@angular/core";
import { HttpClientModule } from "@angular/common/http";
import { NtkCmsFilemanagerModule } from "ntk-cms-filemanager";

@NgModule({
imports: [HttpClientModule, NtkCmsFilemanagerModule],
})
export class AppModule {}
`

$3

`html

`

$3

`typescript
import { Component } from "@angular/core";
import { TranslateUiService } from "ntk-cms-filemanager";

export class FileManagerComponent {
fileManagerConfig = {
apiUrl: "https://api.example.com",
token: "your-auth-token",
language: "fa",
showTree: true,
showToolbar: true,
allowUpload: true,
allowDelete: true,
allowRename: true,
maxFileSize: 5242880, // 5MB
allowedFileTypes: ["image/*", "application/pdf"],
};

constructor(private translateUiService: TranslateUiService) {
// Initialize translations
this.translateUiService.init();
this.translateUiService.setLanguage("fa");
}

onFileSelected(event: any): void {
console.log("File selected:", event);
}

onFolderSelected(event: any): void {
console.log("Folder selected:", event);
}

onUploadComplete(event: any): void {
console.log("Upload complete:", event);
}
}
`

📚 API Reference

$3

| Property | Type | Default | Description |
| ------------------ | -------- | ------- | ----------------------- |
| apiUrl | string | - | API endpoint URL |
| token | string | - | Authentication token |
| language | string | 'en' | Interface language |
| showTree | boolean | true | Show file tree |
| showToolbar | boolean | true | Show toolbar |
| allowUpload | boolean | true | Allow file upload |
| allowDelete | boolean | true | Allow file deletion |
| allowRename | boolean | true | Allow file renaming |
| maxFileSize | number | 5242880 | Maximum file size (5MB) |
| allowedFileTypes | string[] | [] | Allowed file types |

$3

| Event | Type | Description |
| ---------------- | ------------ | ------------------------- |
| fileSelected | EventEmitter | File selection event |
| folderSelected | EventEmitter | Folder selection event |
| uploadComplete | EventEmitter | Upload completion event |
| deleteComplete | EventEmitter | Deletion completion event |
| renameComplete | EventEmitter | Rename completion event |

$3

#### NodeService

`typescript
// Get folder contents
getFolderContents(path: string): Observable

// Create new folder
createFolder(name: string, path: string): Observable

// Delete file/folder
deleteItem(path: string): Observable

// Rename file/folder
renameItem(oldPath: string, newName: string): Observable
`

#### NodeClickedService

`typescript
// Handle file click
onFileClick(file: any): void

// Handle folder click
onFolderClick(folder: any): void

// Search files
searchForString(query: string): void
`

🌐 Internationalization

The file manager supports multiple languages:

$3

- English (en) - Default language
- Persian/Farsi (fa) - فارسی
- French (fr) - Français
- Russian (ru) - Русский

$3

`typescript
import { TranslateModule, TranslateLoader } from "@ngx-translate/core";
import { TranslateHttpLoader } from "@ngx-translate/http-loader";
import { HttpClient } from "@angular/common/http";
import { TranslateUiService } from "ntk-cms-filemanager";

export function HttpLoaderFactory(http: HttpClient) {
return new TranslateHttpLoader(http, "./assets/i18n/ntk-cms-filemanager/", ".json");
}

@NgModule({
imports: [
TranslateModule.forRoot({
loader: {
provide: TranslateLoader,
useFactory: HttpLoaderFactory,
deps: [HttpClient],
},
}),
],
providers: [TranslateUiService],
})
export class AppModule {}
`

$3

`json
{
"filemanager": {
"cancel": "Cancel",
"close": "Close",
"confirm": "Confirm",
"create_new_folder": "Create New Folder",
"delete": "Delete",
"download": "Download",
"file_name": "File Name",
"folder_name": "Folder Name",
"upload": "Upload",
"search": "Search",
"rename": "Rename"
}
}
`

🎨 Customization

$3

`scss
// Custom file manager styles
.ntk-cms-filemanager {
.file-tree {
background-color: #f5f5f5;
border-radius: 4px;
}

.file-item {
&:hover {
background-color: #e3f2fd;
}

&.selected {
background-color: #2196f3;
color: white;
}
}

.upload-zone {
border: 2px dashed #ccc;
border-radius: 8px;
padding: 20px;
text-align: center;

&.drag-over {
border-color: #2196f3;
background-color: #e3f2fd;
}
}
}
`

$3

`html

{{ file.name }}
{{ file.size | fileSize }}

Refresh
New Folder
Upload

`

🔐 Security

$3

`typescript
export class FileManagerComponent {
validateFile(file: File): boolean {
// Check file size
if (file.size > this.maxFileSize) {
this.showError("File size exceeds limit");
return false;
}

// Check file type
const allowedTypes = this.allowedFileTypes;
if (allowedTypes.length > 0) {
const isValidType = allowedTypes.some((type) => {
if (type.endsWith("/*")) {
return file.type.startsWith(type.replace("/*", ""));
}
return file.type === type;
});

if (!isValidType) {
this.showError("File type not allowed");
return false;
}
}

return true;
}

private showError(message: string): void {
// Show error message to user
console.error(message);
}
}
`

🧪 Testing

$3

`typescript
import { ComponentFixture, TestBed } from "@angular/core/testing";
import { HttpClientTestingModule } from "@angular/common/http/testing";
import { NtkCmsFilemanagerModule } from "ntk-cms-filemanager";

describe("FileManagerComponent", () => {
let component: FileManagerComponent;
let fixture: ComponentFixture;

beforeEach(async () => {
await TestBed.configureTestingModule({
imports: [HttpClientTestingModule, NtkCmsFilemanagerModule],
declarations: [FileManagerComponent],
}).compileComponents();

fixture = TestBed.createComponent(FileManagerComponent);
component = fixture.componentInstance;
fixture.detectChanges();
});

it("should create", () => {
expect(component).toBeTruthy();
});

it("should initialize with default configuration", () => {
expect(component.config.language).toBe("en");
expect(component.config.showTree).toBe(true);
});

it("should handle file selection", () => {
const mockFile = { name: "test.txt", type: "text/plain" };
spyOn(component.fileSelected, "emit");

component.onFileSelected(mockFile);

expect(component.fileSelected.emit).toHaveBeenCalledWith(mockFile);
});
});
`

📊 Performance

$3

1. Lazy Loading: Load file tree nodes on demand
2. Virtual Scrolling: Use virtual scrolling for large file lists
3. Caching: Cache file metadata and thumbnails
4. Compression: Compress file transfers when possible
5. Pagination: Implement pagination for large directories

$3

`typescript
export class FileManagerComponent implements OnDestroy {
private destroy$ = new Subject();

ngOnInit(): void {
// Subscribe to observables with takeUntil
this.fileService
.getFiles()
.pipe(takeUntil(this.destroy$))
.subscribe((files) => {
this.files = files;
});
}

ngOnDestroy(): void {
this.destroy$.next();
this.destroy$.complete();
}
}
``

🔄 Version History

$3

- Enhanced multi-language support
- Improved drag & drop functionality
- Added file preview capabilities
- Bug fixes and performance improvements

$3

- Initial release with core functionality
- Tree-based navigation
- Basic file operations
- Multi-language interface

🤝 Contributing

1. Fork the repository
2. Create a feature branch
3. Make your changes
4. Add tests for new features
5. Submit a pull request

📄 License

This library is licensed under the ISC License.

🆘 Support

For support and questions:

- Create an issue on GitHub
- Contact: ntk.ir
- Documentation: Check the main README.md

---

Note: This library is part of the NTK CMS Angular Libraries collection. For more information, see the main project README.