✨ add upload files from modal

Author: marcode24

src/app/core/constants/file.constant.ts

@@ -0,0 +1,8 @@
+export const MAX_FILE_SIZE = 2000000;
+export const ALLOWED_FILE_TYPES = [
+  'image/png',
+  'image/jpeg',
+  'image/jpg',
+  'image/gif',
+  'application/pdf'
+];

src/app/core/interfaces/response.interface.ts

@@ -1,3 +1,4 @@
+import { File } from "@models/file.model";
 import { Folder } from "@models/folder.model";
 import { User } from "@models/user.model";
 
@@ -20,3 +21,9 @@ export interface IFolderResponse {
   ok: boolean,
   folder: Folder,
 }
+
+export interface IFileResponse {
+  ok: boolean,
+  msg: string,
+  files: File[]
+}

src/app/core/services/file.service.spec.ts

@@ -0,0 +1,16 @@
+import { TestBed } from '@angular/core/testing';
+
+import { FileService } from './file.service';
+
+describe('FileService', () => {
+  let service: FileService;
+
+  beforeEach(() => {
+    TestBed.configureTestingModule({});
+    service = TestBed.inject(FileService);
+  });
+
+  it('should be created', () => {
+    expect(service).toBeTruthy();
+  });
+});

src/app/core/services/file.service.ts

@@ -0,0 +1,42 @@
+import { HttpClient } from '@angular/common/http';
+import { EventEmitter, Injectable } from '@angular/core';
+import { environment } from 'environments/environment';
+
+import { Observable, map } from 'rxjs';
+
+import { File as FileModel } from '@models/file.model';
+
+import { IFileResponse } from '@interfaces/response.interface';
+
+import Storage from '@utils/storage.util';
+
+const base_url = environment.base_url;
+
+@Injectable({
+  providedIn: 'root'
+})
+export class FileService {
+  filesCreated: EventEmitter<FileModel[]> = new EventEmitter();
+
+  get headers() {
+    return {
+      headers: {
+        'x-token': Storage.getLocalStorage('token') || ''
+      }
+    };
+  }
+
+  constructor(
+    private http: HttpClient,
+  ) { }
+
+  createFiles(files: File[], folderID: string): Observable<boolean> {
+    const url = `${base_url}/file/upload/${folderID}`;
+    const formData = new FormData();
+    files.forEach((file) => formData.append('file', file));
+    return this.http.post<IFileResponse>(url, formData, this.headers).pipe(map(resp => {
+      this.filesCreated.emit(resp.files);
+      return resp.ok;
+    }));
+  }
+}

src/app/core/services/modal.service.ts

@@ -5,8 +5,13 @@ import { EventEmitter, Injectable } from '@angular/core';
 })
 export class ModalService {
   openNewFolderModal: EventEmitter<{ open: boolean, folderID: string }> = new EventEmitter();
+  openNewFileModal: EventEmitter<{ open: boolean, folderID: string }> = new EventEmitter();
 
   openNewFolder(folderID: string): void {
     this.openNewFolderModal.emit({ open: true, folderID });
   }
+
+  openNewFile(folderID: string): void {
+    this.openNewFileModal.emit({ open: true, folderID });
+  }
 }

src/app/features/home/home.component.html

@@ -25,3 +25,4 @@
 </div>
 
 <app-new-folder></app-new-folder>
+<app-upload-files></app-upload-files>

src/app/features/home/home.component.ts

@@ -1,8 +1,9 @@
-import { Component, OnInit } from '@angular/core';
+import { Component, OnDestroy, OnInit } from '@angular/core';
 
 import { Subscription } from 'rxjs';
 
 import { AuthService } from '@services/auth.service';
+import { FileService } from '@services/file.service';
 import { FolderService } from '@services/folder.service';
 
 import { Folder } from '@models/folder.model';
@@ -12,23 +13,38 @@ import { Folder } from '@models/folder.model';
   templateUrl: './home.component.html',
   styleUrls: ['./home.component.scss']
 })
-export class HomeComponent implements OnInit {
+export class HomeComponent implements OnInit, OnDestroy {
   root: Folder;
   folderCreatedSubscription: Subscription;
+  filesCreatedSubscription: Subscription;
   constructor(
     private authService: AuthService,
-    private folderService: FolderService
+    private folderService: FolderService,
+    private fileService: FileService,
   ) { }
 
+  ngOnDestroy(): void {
+    this.folderCreatedSubscription.unsubscribe();
+    this.filesCreatedSubscription.unsubscribe();
+  }
+
   ngOnInit(): void {
     this.root = this.authService.userActive.rootFolder;
     this.folderCreatedSubscription = this.folderService.folderCreated.subscribe((folder) => {
       this.root.folders.push(folder);
       this.orderFolders();
     });
+    this.filesCreatedSubscription = this.fileService.filesCreated.subscribe((files) => {
+      this.root.files.push(...files);
+      this.orderFiles();
+    });
   }
 
   private orderFolders(): void {
-    this.root.folders.sort((a, b) => a.name > b.name ? 1 : -1);
+    this.root.folders.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1);
+  }
+
+  private orderFiles(): void {
+    this.root.files.sort((a, b) => a.name.toLowerCase() > b.name.toLowerCase() ? 1 : -1);
   }
 }

src/app/shared/headers/actions/actions.component.html

@@ -9,7 +9,7 @@
         <i class="bx bx-folder-plus"></i>
         <span class="title">Carpeta nueva</span>
       </li>
-      <li class="item">
+      <li class="item" (click)="openNewFileModal(btnDrop)">
         <i class="bx bx-upload"></i>
         <span class="title">Subir archivo</span>
       </li>

src/app/shared/headers/actions/actions.component.ts

@@ -28,4 +28,9 @@ export class ActionsComponent {
     this.closeDrop(element);
     this.modalService.openNewFolder(this.folder._id as string);
   }
+
+  openNewFileModal(element: HTMLButtonElement): void {
+    this.closeDrop(element);
+    this.modalService.openNewFile(this.folder._id as string);
+  }
 }

src/app/shared/modals/modals.module.ts

@@ -3,17 +3,20 @@ import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
 import { NewFolderComponent } from './new-folder/new-folder.component';
+import { UploadFilesComponent } from './upload-files/upload-files.component';
 
 @NgModule({
   declarations: [
-    NewFolderComponent
+    NewFolderComponent,
+    UploadFilesComponent
   ],
   imports: [
     CommonModule,
     FormsModule,
   ],
   exports: [
-    NewFolderComponent
+    NewFolderComponent,
+    UploadFilesComponent
   ]
 })
 export class ModalsModule { }