Made images with incorrect extensions visible at UI

ui/src/app/data/enums/upload-image-errors.enum.ts

@@ -0,0 +1,20 @@
+/*
+ * Copyright (c) 2020 the original author or authors
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *      https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express
+ * or implied. See the License for the specific language governing
+ * permissions and limitations under the License.
+ */
+
+export enum UploadImageErrors {
+  InvalidFileSize = 'Invalid File Size',
+  InvalidFileType = 'Invalid File Type',
+}

ui/src/app/features/image-holder/image-holder.component.html

@@ -18,7 +18,7 @@
     <div *ngIf="!selectionMode && isDeleteVisible" class="delete-icon">
       <button class="del-btn" (click)="onDelete.emit(item)"><mat-icon svgIcon="trash"></mat-icon></button>
     </div>
-    <img [src]="item.url" />
+    <img [src]="checkedUrl" />
     <div *ngIf="selectionMode" class="selection-overlay">
       <input type="checkbox" [(ngModel)]="item.isSelected" />
     </div>

ui/src/app/features/image-holder/image-holder.component.ts

@@ -16,6 +16,7 @@
 import { EventEmitter, SimpleChanges } from '@angular/core';
 import { Component, Input, Output, ChangeDetectionStrategy, OnChanges } from '@angular/core';
 import { CircleLoadingProgressEnum } from 'src/app/data/enums/circle-loading-progress.enum';
+import { UploadImageErrors } from 'src/app/data/enums/upload-image-errors.enum';
 import { CollectionItem } from 'src/app/data/interfaces/collection';
 
 @Component({
@@ -29,13 +30,17 @@ export class ImageHolderComponent implements OnChanges {
   @Input() selectionMode: CollectionItem;
 
   isDeleteVisible: boolean;
+  checkedUrl: string;
 
   @Output() onDelete = new EventEmitter<CollectionItem>();
   @Output() onCancel = new EventEmitter<CollectionItem>();
   @Output() onSelect = new EventEmitter<CollectionItem>();
 
   ngOnChanges(changes: SimpleChanges): void {
     if (changes.item?.currentValue) {
+      this.checkedUrl =
+        this.item?.error && this.item?.error.includes(UploadImageErrors.InvalidFileType) ? 'assets/img/plug-image.svg' : this.item.url;
+
       this.isDeleteVisible =
         this.item.status === CircleLoadingProgressEnum.Uploaded || this.item.status === CircleLoadingProgressEnum.Failed;
     }

ui/src/app/store/manage-collectiom/effects.ts

@@ -63,6 +63,8 @@ import { selectCurrentApiKey } from '../model/selectors';
 import { SubjectModeEnum } from 'src/app/data/enums/subject-mode.enum';
 import { CollectionItem } from 'src/app/data/interfaces/collection';
 import { selectMaxFileSize } from '../image-size/selectors';
+import { AVAILABLE_IMAGE_EXTENSIONS } from 'src/app/core/constants';
+import { UploadImageErrors } from 'src/app/data/enums/upload-image-errors.enum';
 
 @Injectable()
 export class CollectionEffects {
@@ -185,7 +187,12 @@ export class CollectionEffects {
           const resSubject = new Subject<{ file: File; url: string; subject: string }>();
 
           fileReader.onload = e => {
-            const url = e.target.result as string;
+            let url = e.target.result as string;
+            const fileExtension = file.name.split('.').pop().toLowerCase();
+
+            if (!AVAILABLE_IMAGE_EXTENSIONS.includes(fileExtension)) {
+              url += new Date().getTime();
+            }
 
             if (fileUrls.indexOf(url) !== -1) return;
 
@@ -247,10 +254,10 @@ export class CollectionEffects {
       const type = /(\/jpg|\/jpeg|\/webp|\/png)$/i;
 
       if (sizeInBytes && file.size > sizeInBytes) {
-        return of(uploadImageFail({ error: `Invalid File Size ! \n File Name: ${file.name}`, item, continueUpload }));
+        return of(uploadImageFail({ error: `${UploadImageErrors.InvalidFileSize}! \n File Name: ${file.name}`, item, continueUpload }));
       }
       if (!ext.exec(file.name) || !type.exec(file.type)) {
-        return of(uploadImageFail({ error: `Invalid File Type ! \n File Name: ${file.name}`, item, continueUpload }));
+        return of(uploadImageFail({ error: `${UploadImageErrors.InvalidFileType}! \n File Name: ${file.name}`, item, continueUpload }));
       }
 
       return this.collectionService.uploadSubjectExamples(item, subject, apiKey).pipe(