Upload d'images et affichage des dites

images

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.html

@@ -1,6 +1,6 @@
 <form [formGroup]="imgForm" (ngSubmit)="onSubmit(imgForm.value)" autocomplete="off" style="padding: 10px;">
   <p>
-    <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" style="display: none"
+    <input type="file" #fileUpload id="fileUpload" name="fileUpload" accept="image/*" style="display: none;"
       formControlName="image" (change)="onFileChanged($event)" />
     <button (click)="fileUpload.click()">Select File</button>
   </p>
@@ -15,4 +15,27 @@
     <mat-icon>file_upload</mat-icon>
     Upload image
   </button>
+  <label>{{ imageError }}</label>
 </form>
+
+<table mat-table [dataSource]="dataSourceTable">
+  <ng-container matColumnDef="id">
+    <th mat-header-cell *matHeaderCellDef>ID</th>
+    <td mat-cell *matCellDef="let element">{{element.id}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="comment">
+    <th mat-header-cell *matHeaderCellDef>Name</th>
+    <td mat-cell *matCellDef="let element">{{element.comment}}</td>
+  </ng-container>
+
+  <ng-container matColumnDef="data">
+    <th mat-header-cell *matHeaderCellDef>Manufacturer</th>
+    <td mat-cell *matCellDef="let element"><img src="{{element.data}}" alt="toto"></td>
+  </ng-container>
+
+  <tr mat-header-row *matHeaderRowDef="displayedColumns; sticky: true"></tr>
+  <tr mat-row *matRowDef="let row; columns: displayedColumns;"></tr>
+</table>
+
+<mat-paginator [length]="resultsLength" [pageSize]="10"></mat-paginator>

Front/skydivelogs-app/src/app/list-of-images/list-of-images.component.ts

@@ -14,10 +14,12 @@ import { AddAction } from "../../models/add-action.enum";
   styleUrls: ["./list-of-images.component.css"],
 })
 export class ListOfImagesComponent implements OnInit {
+  public displayedColumns: Array<string> = ["id", "comment", "data"];
   public imgForm: FormGroup;
-  private selectedFile: File;
+  public imageError: string;
   public dataSourceTable: MatTableDataSource<ImageResp>;
   public resultsLength = 0;
+  private selectedFile: string;
   @ViewChild(MatPaginator, { static: true }) paginator: MatPaginator;
 
   constructor(
@@ -39,7 +41,7 @@ export class ListOfImagesComponent implements OnInit {
     });
   }
 
-  getListOfImages() {
+  private getListOfImages() {
     this.serviceApi.getListOfImages().subscribe((data) => {
       setTimeout(() => {
         this.dataSourceTable = new MatTableDataSource<ImageResp>(data);
@@ -49,12 +51,47 @@ export class ListOfImagesComponent implements OnInit {
     });
   }
 
-  onFileChanged(event) {
+  public onFileChanged(fileInput: any) {
-    this.selectedFile = event.target.files[0];
+    var file = fileInput.dataTransfer
+      ? fileInput.dataTransfer.files[0]
+      : fileInput.target.files[0];
+    const allowed_types = ["image/png", "image/jpeg"];
+    const max_size = 20971520;
+
+    if (!allowed_types.includes(file.type)) {
+      this.imageError = "Only Images are allowed ( JPG | PNG )";
+    } else if (file.size > max_size) {
+      this.imageError = "Maximum size allowed is " + max_size / 1000 + "Mb";
+    } else {
+      const reader = new FileReader();
+      reader.onload = this.checkAndExtractDataToBase64.bind(this);
+      reader.readAsDataURL(fileInput.target.files[0]);
+    }
+  }
+
+  private checkAndExtractDataToBase64(e: any) {
+    const max_height = 15200;
+    const max_width = 25600;
+
+    const image = new Image();
+    image.src = e.target.result;
+    image.onload = (rs) => {
+      const img_height = rs.currentTarget["height"];
+      const img_width = rs.currentTarget["width"];
+
+      if (img_height > max_height && img_width > max_width) {
+        this.imageError =
+          "Maximum dimentions allowed " + max_height + "*" + max_width + "px";
+      } else {
+        const imgBase64Path = e.target.result;
+        this.selectedFile = imgBase64Path;
+        this.imageError = "OK";
+      }
+    };
   }
 
   onSubmit(formData) {
-    if (this.imgForm.invalid) {
+    if (formData.invalid) {
       return;
     }
 

Front/skydivelogs-app/src/services/image.service.ts

@@ -18,11 +18,11 @@ export class ImageService extends BaseService {
     });
   }
 
-  public AddImage(commentImg: string, dataImg: File) {
+  public AddImage(commentImg: string, dataImg: string) {
     const bodyNewImage: ImageReq = {
       id: 0,
       comment: commentImg,
-      data: dataImg.type,
+      data: dataImg,
     };
 
     this.http