Merge pull request #16 from Azo-hub/newFeature

update 4.5

Author: Azo-hub

src/app/add-property-details-owner/add-property-details-owner.component.html

@@ -401,6 +401,12 @@ <h5 class="card-title">Add Property Image <small class="text-muted">Multiple Ima
                                 <input type="file" class="form-control"
                                     (change)="onFileSelected($any($event).target.files)" name="propertyImage"
                                     multiple />
+
+                                <!-- <div *ngIf="fileStatus.status === 'progress'" class="progress" role="progressbar" aria-label="Basic example"
+                                    aria-valuenow="0" aria-valuemin="0" aria-valuemax="100">
+                                    <div class="progress-bar progress-bar-animated bg-info" [style.width.%]="fileStatus.percent">
+                                        {{fileStatus.requestType}} {{fileStatus.percent}}%</div>
+                                </div> -->
                             </div>
                             <div class="col-sm-5">
                                 <i class="fa fa-spinner fa-spin " *ngIf="pictureShowLoading"></i>&nbsp;&nbsp;

src/app/add-property-details-owner/add-property-details-owner.component.ts

@@ -1,4 +1,4 @@
-import { HttpResponse, HttpErrorResponse, HttpClient } from '@angular/common/http';
+import { HttpResponse, HttpErrorResponse, HttpClient, HttpEvent, HttpEventType, HttpProgressEvent } from '@angular/common/http';
 import { Component, OnInit, OnDestroy, AfterViewInit, ViewChild, ElementRef } from '@angular/core';
 import { Router } from '@angular/router';
 import { Subscription } from 'rxjs';
@@ -36,6 +36,7 @@ export class AddPropertyDetailsOwnerComponent implements OnInit, OnDestroy, Afte
 
   showLoadingDone: boolean;
   public host = environment.apiUrl;
+  fileStatus = { status: '', requestType: '', percent: 0 };
 
 
 
@@ -133,31 +134,66 @@ export class AddPropertyDetailsOwnerComponent implements OnInit, OnDestroy, Afte
       formData.append("propertyId", String(this.propertyId));
     }
 
-    const upload$ = this.http.post(`${this.host}/uploadPropertyImages`, formData);
-
-    upload$.subscribe(
-      (response: any) => {
-        this.pictureShowLoading = false
-        this.pictureshowLoading = false;
-        this.sendNotification(NotificationType.SUCCESS, `Images uploaded successfully.`);
+    this.subscriptions.push(
+      this.propertyService.uploadPropertyImages(formData).subscribe(
+        (response: CustomHttpResponse) => {
 
+        /*  this.reportProgress(event); */
+          this.pictureShowLoading = false
+          this.pictureshowLoading = false;
+          this.sendNotification(NotificationType.SUCCESS, `Images uploaded successfully.`);
 
-      },
-      (errorResponse: HttpErrorResponse) => {
+        },
+        (errorResponse: HttpErrorResponse) => {
+          this.sendNotification(NotificationType.ERROR, errorResponse.error.message);
+          this.pictureShowLoading = false;
+          this.pictureshowLoading = false;
+        }
+      )
+    );
 
-        this.sendNotification(NotificationType.ERROR, errorResponse.error.message);
-        this.pictureShowLoading = false;
-        this.pictureshowLoading = false;
-      }
-    )
 
 
   }
 
 
 
 
+/*  private reportProgress(httpEvent: HttpEvent<any | Blob>): void {
+    switch (httpEvent.type) {
+      case HttpEventType.UploadProgress:
+        this.updateStatus(httpEvent.loaded, httpEvent.total!, 'Uploading...');
+        break;
+
+      case HttpEventType.DownloadProgress:
+        this.updateStatus(httpEvent.loaded, httpEvent.total!, 'Downloading...');
+        break;
+
+      case HttpEventType.ResponseHeader:
+        console.log('Header returned', httpEvent);
+        break;
+
+      case HttpEventType.Response:
+        if (httpEvent.body instanceof Array) {
+          this.fileStatus.status = 'done';
+
+        }
+        break;
+
+      default:
+        console.log(httpEvent);
+        break;
+    }
+  }
+
+  private updateStatus(loaded: number, total: number, requestType: string) {
+    this.fileStatus.status = 'progress';
+    this.fileStatus.requestType = requestType;
+    this.fileStatus.percent = Math.round(100 * loaded / total);
+
+  }
 
+*/
 
 
   private sendNotification(notificationType: NotificationType, message: string) {

src/app/service/property.service.ts

@@ -1,4 +1,4 @@
-import { HttpClient, HttpResponse } from '@angular/common/http';
+import { HttpClient, HttpEvent, HttpProgressEvent, HttpResponse } from '@angular/common/http';
 import { Injectable } from '@angular/core';
 import { Observable } from 'rxjs';
 import { environment } from 'src/environments/environment';
@@ -68,6 +68,11 @@ export class PropertyService {
 
   }
 
+  uploadPropertyImages(formData: FormData): Observable<CustomHttpResponse> {
+    return this.http.post<CustomHttpResponse>(`${this.host}/uploadPropertyImages`, formData);
+
+  }
+
   public addPropertiesToLocalCache(properties: Property[]): void {
     localStorage.setItem('properties', JSON.stringify(properties));
   }