✨ add pipe for file size

Author: marcode24

src/app/core/pipes/file-size.pipe.spec.ts

@@ -0,0 +1,9 @@
+import { FileSizePipe } from './file-size.pipe';
+
+describe('FileSizePipe', () => {
+  it('create an instance', () => {
+    const pipe = new FileSizePipe();
+
+    expect(pipe).toBeTruthy();
+  });
+});

src/app/core/pipes/file-size.pipe.ts

@@ -0,0 +1,23 @@
+import { Pipe, PipeTransform } from '@angular/core';
+
+@Pipe({
+  name: 'fileSize'
+})
+export class FileSizePipe implements PipeTransform {
+
+  transform(value: string | number): string {
+    return this.formatBytes(+value);
+  }
+
+  private formatBytes(bytes: number, decimals = 2): string {
+    if (bytes === 0) {
+      return '0 Bytes';
+    }
+    const k = 1024;
+    const dm = decimals < 0 ? 0 : decimals;
+    const sizes = ['Bytes', 'KB', 'MB'];
+    const i = Math.floor(Math.log(bytes) / Math.log(k));
+    return parseFloat((bytes / Math.pow(k, i)).toFixed(dm)) + ' ' + sizes[i];
+  }
+
+}

src/app/core/pipes/pipes.module.ts

@@ -0,0 +1,17 @@
+import { CommonModule } from '@angular/common';
+import { NgModule } from '@angular/core';
+
+import { FileSizePipe } from './file-size.pipe';
+
+@NgModule({
+  declarations: [
+    FileSizePipe
+  ],
+  imports: [
+    CommonModule
+  ],
+  exports: [
+    FileSizePipe
+  ]
+})
+export class PipesModule { }

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

@@ -2,6 +2,8 @@ import { CommonModule } from '@angular/common';
 import { NgModule } from '@angular/core';
 import { FormsModule } from '@angular/forms';
 
+import { PipesModule } from '@pipes/pipes.module';
+
 import { NewFolderComponent } from './new-folder/new-folder.component';
 import { UploadFilesComponent } from './upload-files/upload-files.component';
 
@@ -13,6 +15,7 @@ import { UploadFilesComponent } from './upload-files/upload-files.component';
   imports: [
     CommonModule,
     FormsModule,
+    PipesModule
   ],
   exports: [
     NewFolderComponent,

src/app/shared/modals/upload-files/upload-files.component.html

@@ -20,7 +20,7 @@
                   <i class="bx bx-file"></i>
                 </div>
                 <span class="file-name">{{ file.name }}</span>
-                <span class="file-size">{{ file.size }}</span>
+                <span class="file-size">{{ file.size | fileSize }}</span>
               </div>
               <div class="file-actions">
                 <i class="bx bx-x" (click)="removeFile(i)"></i>

src/app/shared/modals/upload-files/upload-files.component.scss

@@ -63,12 +63,12 @@
         @include fs-6;
         @include fw-500;
         color: var(--fc-primary);
-        flex: 6;
+        flex: 10;
       }
 
       & .file-size {
         @include fs-6;
-        flex: 1;
+        flex: 2;
         color: var(--fc-secondary);
       }
     }

tsconfig.json

@@ -32,6 +32,7 @@
       "@interceptors/*": [ "app/core/interceptors/*" ],
       "@guards/*": [ "app/core/guards/*" ],
       "@constants/*": [ "app/core/constants/*" ],
+      "@pipes/*": [ "app/core/pipes/*" ],
       "@shared/*": [ "app/shared/*" ],
     }
   },