fix: add file uploads progress indicator

Author: uzenith360

package-lock.json

@@ -37,6 +37,9 @@
     "@angular/common": "^20.3.0",
     "@angular/compiler": "^20.3.0",
     "@angular/core": "^20.3.0",
+    "@angular/cdk": "^20.2.3",
+    "@angular/forms": "^20.3.0",
+    "@angular/material": "^20.2.3",
     "@angular/platform-browser": "^20.3.0",
     "@angular/platform-browser-dynamic": "^20.3.0",
     "@angular/router": "^20.3.0",
@@ -63,4 +66,4 @@
     "ng-packagr": "^20.3.0",
     "typescript": "~5.9.2"
   }
-}
+}

package.json

@@ -10,6 +10,9 @@
     "@angular/common": "^20.3.0",
     "@angular/compiler": "^20.3.0",
     "@angular/core": "^20.3.0",
+    "@angular/cdk": "^20.2.3",
+    "@angular/forms": "^20.3.0",
+    "@angular/material": "^20.2.3",
     "@angular/platform-browser": "^20.3.0",
     "@angular/platform-browser-dynamic": "^20.3.0",
     "@angular/router": "^20.3.0"
@@ -18,4 +21,4 @@
     "tslib": "^2.3.0"
   },
   "sideEffects": false
-}
+}

projects/ngx-file-upload/package.json

@@ -0,0 +1,31 @@
+<div [hidden]="!totalUploads()"
+  class="fixed bottom-0 right-0 z-10 rounded-tl-lg rounded-tr-lg md:rounded-tr-none w-full md:max-w-sm p-6 bg-blue-700 text-white">
+  <div class="flex justify-between gap-x-6">
+    <h4 class="font-medium">Uploading Files</h4>
+    <h6 class="text-sm">{{currentUploadIndex()}} of {{totalUploads()}}</h6>
+  </div>
+  <div class="flex">
+    <div class="h-4 bg-gray-200 overflow-hidden mt-2 flex-grow">
+      <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-4 relative" [style]="'width:'+(uploadProgress()??0)+'%'">
+        <p class="absolute top-0 left-0 w-full text-center text-xs text-white">{{uploadProgress()}}%</p>
+      </div>
+    </div>
+    @if (isUploadsResumeData()) {
+    <button (click)="resumeUploadFilesEvent.emit()" matRipple class="p-1 !overflow-visible">
+      <mat-icon class="align-middle !h-[20px] !w-[20px] text-[20px]">play_circle_outline</mat-icon>
+    </button>
+    }
+  </div>
+  @for (fileUploadProgress of filesUploadProgress(); track fileUploadProgress.name) {
+  <div class="mt-2">
+    <p class="text-xs text-right text-ellipsis whitespace-nowrap overflow-hidden">{{fileUploadProgress.name}}</p>
+    <div class="h-4 bg-gray-200 overflow-hidden flex-grow">
+      <div class="bg-gradient-to-r from-purple-500 to-pink-500 h-4 relative"
+        [style]="'width:'+(fileUploadProgress.progress)+'%'">
+        <p class="absolute top-0 left-0 w-full text-center text-xs text-white">{{fileUploadProgress.progress}}%
+        </p>
+      </div>
+    </div>
+  </div>
+  }
+</div>

projects/ngx-file-upload/src/lib/file-uploads-progress/file-uploads-progress.component.css

@@ -0,0 +1,23 @@
+import { ComponentFixture, TestBed } from '@angular/core/testing';
+
+import { FileUploadsProgressComponent } from './file-uploads-progress.component';
+
+describe('FileUploadsProgressComponent', () => {
+  let component: FileUploadsProgressComponent;
+  let fixture: ComponentFixture<FileUploadsProgressComponent>;
+
+  beforeEach(async () => {
+    await TestBed.configureTestingModule({
+      imports: [FileUploadsProgressComponent]
+    })
+    .compileComponents();
+
+    fixture = TestBed.createComponent(FileUploadsProgressComponent);
+    component = fixture.componentInstance;
+    fixture.detectChanges();
+  });
+
+  it('should create', () => {
+    expect(component).toBeTruthy();
+  });
+});

projects/ngx-file-upload/src/lib/file-uploads-progress/file-uploads-progress.component.html

@@ -0,0 +1,19 @@
+import { Component, input, output } from '@angular/core';
+import { MatIcon } from '@angular/material/icon';
+
+@Component({
+  selector: 'ngx-file-uploads-progress',
+  imports: [MatIcon],
+  templateUrl: './file-uploads-progress.component.html',
+  styleUrl: './file-uploads-progress.component.css'
+})
+export class FileUploadsProgressComponent {
+  readonly resumeUploadFilesEvent = output<void>();
+  readonly isPhotoUploadsBusy = input<boolean>(false);
+
+  public totalUploads = input<number | undefined>();
+  public uploadProgress = input<number | undefined>();
+  public currentUploadIndex = input<number | undefined>();
+  public filesUploadProgress = input<{ name: string, progress: number }[] | undefined>();
+  public isUploadsResumeData = input<boolean>();
+}

projects/ngx-file-upload/src/lib/file-uploads-progress/file-uploads-progress.component.spec.ts

@@ -2,6 +2,7 @@
  * Public API Surface of ngx-file-upload
  */
 
+export * from './lib/file-uploads-progress/file-uploads-progress.component';
 export * from './lib/file-upload/file-upload-response.interface';
 export * from './lib/file-upload/file-upload-timeout.error';
 export * from './lib/file-upload/file-upload.service';