Upload d'images et affichage des dites

images

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) {
-    this.selectedFile = event.target.files[0];
+  public onFileChanged(fileInput: any) {
+    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;
     }