feat: upload

projects/ngx-explorer/src/lib/common/types.ts

@@ -1,8 +1,7 @@
 import { Observable } from "rxjs";
 
-export type TLeaf = any;
 export type TNode = any;
-export type NodeContent = { leafs: TLeaf[], nodes: TNode[] };
+export type NodeContent = { leafs: TNode[], nodes: TNode[] };
 
 export interface Dictionary<T> {
     [Key: string]: T;
@@ -11,7 +10,7 @@ export interface Dictionary<T> {
 export interface XNode {
     id: string;
     parentId: string;
-    data: TNode | TLeaf;
+    data: TNode;
     isLeaf: boolean;
     children: XNode[];
 }
@@ -20,7 +19,8 @@ export interface DataProvider {
     getNodeChildren(nodeInfo: TNode): Observable<NodeContent>;
     createNode(parentData: TNode, data: TNode) : Observable<TNode>;
     renameNode(nodeInfo: TNode, newName: string): Observable<TNode>;
-    renameLeaf(leafInfo: TLeaf, newName: string): Observable<TLeaf>;
+    renameLeaf(leafInfo: TNode, newName: string): Observable<TNode>;
     deleteNodes(nodeInfos: TNode[]): Observable<any>;
-    deleteLeafs(leafInfos: TLeaf[]): Observable<any>;
+    deleteLeafs(leafInfos: TNode[]): Observable<any>;
+    uploadFiles(nodeInfo: TNode, files: File[]): Observable<TNode>;
 }

projects/ngx-explorer/src/lib/components/breadcrumbs/breadcrumbs.component.html

@@ -1 +1 @@
-<span *ngFor="let crumb of breadcrumbs"><button (click)="click(crumb)">{{ crumb.name }} > </button> </span>
+<span *ngFor="let crumb of breadcrumbs"><button (click)="click(crumb)">{{ crumb.name }} </button> > </span>

projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html

@@ -4,4 +4,6 @@
     <button (click)="refresh()">Refresh</button>
     <button (click)="rename()">Rename</button>
     <button (click)="remove()">Delete</button>
+    <button (click)="openUploader()">Upload</button>
+    <input style="display: none" type="file" multiple (change)="handleFiles($event.target.files)" #uploader>
 </div>

projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts

@@ -1,4 +1,4 @@
-import { Component } from '@angular/core';
+import { Component, ElementRef, ViewChild } from '@angular/core';
 import { ExplorerService } from '../../services/explorer.service';
 
 @Component({
@@ -7,6 +7,7 @@ import { ExplorerService } from '../../services/explorer.service';
     styleUrls: ['./menu-bar.component.scss']
 })
 export class MenuBarComponent {
+    @ViewChild('uploader', { static: true }) uploader: ElementRef;
 
     constructor(private explorerService: ExplorerService) { }
 
@@ -48,4 +49,14 @@ export class MenuBarComponent {
         }
     }
 
+    openUploader() {
+        this.uploader.nativeElement.click();
+    }
+
+    handleFiles(files: File[]) {
+        const currentNode = this.explorerService.openedNode.value;
+        this.explorerService.upload(currentNode, files);
+        this.uploader.nativeElement.value = '';
+    }
+
 }

projects/ngx-explorer/src/lib/services/explorer.service.ts

@@ -87,6 +87,12 @@ export class ExplorerService {
         });
     }
 
+    upload(target: XNode, files: File[]) {
+        this.dataService.uploadFiles(target.data, files).subscribe(() => {
+            this.refresh();
+        });
+    }
+
 }
 
 // TODO: navigateToNode // -- later feature for left nav