feat: download files

artemnih · Oct 4, 2021 · f92bf50 · f92bf50
1 parent 54e8181
commit f92bf50
Show file tree

Hide file tree

Showing 5 changed files with 50 additions and 18 deletions.
diff --git a/projects/ngx-explorer/src/lib/common/types.ts b/projects/ngx-explorer/src/lib/common/types.ts
@@ -16,11 +16,12 @@ export interface XNode {
 }
 
 export interface DataProvider {
-    getNodeChildren(nodeInfo: TNode): Observable<NodeContent>;
-    createNode(parentData: TNode, data: TNode) : Observable<TNode>;
-    renameNode(nodeInfo: TNode, newName: string): Observable<TNode>;
-    renameLeaf(leafInfo: TNode, newName: string): Observable<TNode>;
-    deleteNodes(nodeInfos: TNode[]): Observable<any>;
-    deleteLeafs(leafInfos: TNode[]): Observable<any>;
-    uploadFiles(nodeInfo: TNode, files: File[]): Observable<TNode>;
+    getNodeChildren(node: TNode): Observable<NodeContent>;
+    createNode(parentNode: TNode, node: TNode) : Observable<TNode>;
+    renameNode(node: TNode, newName: string): Observable<TNode>;
+    renameLeaf(node: TNode, newName: string): Observable<TNode>;
+    deleteNodes(nodes: TNode[]): Observable<any>;
+    deleteLeafs(nodes: TNode[]): Observable<any>;
+    uploadFiles(node: TNode, files: File[]): Observable<TNode>;
+    download(node: TNode): Observable<any>;
 }
diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.html
@@ -5,5 +5,7 @@
     <button (click)="rename()">Rename</button>
     <button (click)="remove()">Delete</button>
     <button (click)="openUploader()">Upload</button>
+    <button (click)="download()">Download</button>
+
     <input style="display: none" type="file" multiple (change)="handleFiles($event.target.files)" #uploader>
 </div>
diff --git a/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts b/projects/ngx-explorer/src/lib/components/menu-bar/menu-bar.component.ts
@@ -59,4 +59,11 @@ export class MenuBarComponent {
         this.uploader.nativeElement.value = '';
     }
 
+    download() {
+        const selection = this.explorerService.selectedNodes.value;
+        if (selection.length === 1) {
+            this.explorerService.download(selection[0]);
+        }
+    }
+
 }
diff --git a/projects/ngx-explorer/src/lib/services/example-data.service.ts b/projects/ngx-explorer/src/lib/services/example-data.service.ts
@@ -18,7 +18,7 @@ let mock_folders = [
 ];
 
 let mock_files = [
-    { id: 428, name: 'notes.txt', path: '' },
+    { id: 428, name: 'notes.txt', path: '', content: undefined },
     { id: 4281, name: '2.txt', path: '' },
     { id: 28, name: 'Thriller', path: 'music/rock/thebeatles/thriller' },
     { id: 29, name: 'Imagine', path: 'music/rock/thebeatles/imagine' },
@@ -44,32 +44,47 @@ let mock_files = [
 })
 export class ExampleDataService implements DataProvider {
 
-    uploadFiles(nodeInfo: any, files: File[]): Observable<TNode[]> {
+    download(node: TNode): Observable<any> {
+        const file = mock_files.find(f => f.id === node.id);
+        const objectUrl = window.URL.createObjectURL(file.content);
+        const a: HTMLAnchorElement = document.createElement('a') as HTMLAnchorElement;
+
+        a.href = objectUrl;
+        a.download = file.name;
+        document.body.appendChild(a);
+        a.click();
+
+        document.body.removeChild(a);
+        URL.revokeObjectURL(objectUrl);
+        return of(null);
+    }
+
+    uploadFiles(node: TNode, files: File[]): Observable<TNode[]> {
         const results = [];
         for (let i = 0; i < files.length; i++) {
             const file = files[i];
-            const nodePath = nodeInfo ? mock_folders.find(f => f.id === nodeInfo.id).path : '';
+            const nodePath = node ? mock_folders.find(f => f.id === node.id).path : '';
             const newFile = { id: uuid(), name: file.name, path: nodePath + '/' + file.name, content: file };
             mock_files.push(newFile);
             results.push(of(newFile));
         };
         return forkJoin(results);
     }
 
-    deleteNodes(nodeInfos: TNode[]): Observable<any> {
-        const results = nodeInfos.map(nodeInfo => {
-            const path = nodeInfo.path + '/';
+    deleteNodes(nodes: TNode[]): Observable<any> {
+        const results = nodes.map(node => {
+            const path = node.path + '/';
             mock_files = mock_files.filter(f => !f.path.startsWith(path))
             mock_folders = mock_folders.filter(f => !f.path.startsWith(path))
-            mock_folders = mock_folders.filter(f => f.id !== nodeInfo.id);
+            mock_folders = mock_folders.filter(f => f.id !== node.id);
             return of({});
         });
         return forkJoin(results)
     }
 
-    deleteLeafs(leafInfos: TNode[]): Observable<any> {
-        const results = leafInfos.map(leafInfo => {
-            const leaf = mock_files.find(f => f.id === leafInfo.id);
+    deleteLeafs(nodes: TNode[]): Observable<any> {
+        const results = nodes.map(node => {
+            const leaf = mock_files.find(f => f.id === node.id);
             const index = mock_files.indexOf(leaf);
             mock_files.splice(index, 1);
             return of({});

diff --git a/projects/ngx-explorer/src/lib/services/explorer.service.ts b/projects/ngx-explorer/src/lib/services/explorer.service.ts
@@ -87,12 +87,19 @@ export class ExplorerService {
         });
     }
 
-    upload(target: XNode, files: File[]) {
+    public upload(target: XNode, files: File[]) {
         this.dataService.uploadFiles(target.data, files).subscribe(() => {
             this.refresh();
         });
     }
 
+    public download(node: XNode) {
+        const target = this.flatPointers[node.id]
+        this.dataService.download(target.data).subscribe(() => {
+            this.refresh();
+        });
+    }
+
 }
 
 // TODO: navigateToNode // -- later feature for left nav