Ntk Cms Api And Model For Typscript
npm install ntk-cms-filemanagerbash
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 }}
`
π 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();
}
}
``