From 056b4c83713c070ca3a30ae6a574efee3a52b4d1 Mon Sep 17 00:00:00 2001
From: dtziotzios <dtziotzios@cite.gr>
Date: Tue, 12 Feb 2019 13:48:24 +0200
Subject: [PATCH] Fixes upload image functionality on Project.

---
 .../project/project-file-upload.service.ts    |  9 ++++--
 .../editor/project-editor.component.html      |  9 ++++--
 .../editor/project-editor.component.ts        | 30 +++++++++++--------
 3 files changed, 30 insertions(+), 18 deletions(-)

diff --git a/dmp-frontend/src/app/core/services/project/project-file-upload.service.ts b/dmp-frontend/src/app/core/services/project/project-file-upload.service.ts
index 393271a29..21ff51f53 100644
--- a/dmp-frontend/src/app/core/services/project/project-file-upload.service.ts
+++ b/dmp-frontend/src/app/core/services/project/project-file-upload.service.ts
@@ -4,10 +4,11 @@ import { Observable } from 'rxjs';
 import { environment } from '../../../../environments/environment';
 import { ContentFile } from '../../model/project/project-listing';
 import { BaseHttpService } from '../http/base-http.service';
+import { BaseHttpParams } from '../../../common/http/base-http-params';
+import { InterceptorType } from '../../../common/http/interceptors/interceptor-type';
 
 @Injectable()
 export class ProjectFileUploadService {
-
 	private actionUrl: string;
 	private headers: HttpHeaders;
 
@@ -16,6 +17,10 @@ export class ProjectFileUploadService {
 	}
 
 	uploadFile(formData: FormData): Observable<ContentFile> {
-		return this.http.post(this.actionUrl + 'upload', formData, this.headers);
+		const params = new BaseHttpParams();
+		params.interceptorContext = {
+			excludedInterceptors: [InterceptorType.JSONContentType]
+		};
+		return this.http.post(this.actionUrl + 'upload', formData, { params: params });
 	}
 }
diff --git a/dmp-frontend/src/app/ui/project/editor/project-editor.component.html b/dmp-frontend/src/app/ui/project/editor/project-editor.component.html
index cfa0cd005..02d56114b 100644
--- a/dmp-frontend/src/app/ui/project/editor/project-editor.component.html
+++ b/dmp-frontend/src/app/ui/project/editor/project-editor.component.html
@@ -8,11 +8,14 @@
 					<table class="logo-table col-auto">
 						<tr>
 							<td>
-								<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
-								<img mat-card-avatar (click)='imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
+								<img mat-card-avatar (click)='editmode && imgFileInput.click()' *ngIf="!formGroup.get('files') || !formGroup.get('files').value" [src]="host+'files/any?type=jpg'">
+								<img mat-card-avatar (click)='editMode && imgFileInput.click()' *ngIf="formGroup.get('files') && formGroup.get('files').value" [src]="host+'files/'+formGroup.get('files').value[0].id+'?location='+formGroup.get('files').value[0].location+'&type='+formGroup.get('files').value[0].type">
 							</td>
 							<td>
-								<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*" />
+								<input class="hidden" type="file" #imgFileInput (change)="previewImage($event)" accept="image/*"/>
+								<div>
+									<mat-error *ngIf="sizeError">File is too big!</mat-error>
+								</div>
 							</td>
 						</tr>
 					</table>
diff --git a/dmp-frontend/src/app/ui/project/editor/project-editor.component.ts b/dmp-frontend/src/app/ui/project/editor/project-editor.component.ts
index d8abb0556..f023c25d7 100644
--- a/dmp-frontend/src/app/ui/project/editor/project-editor.component.ts
+++ b/dmp-frontend/src/app/ui/project/editor/project-editor.component.ts
@@ -32,6 +32,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
 	formGroup: FormGroup = null;
 	host = environment.Server;
 	editMode = false;
+	sizeError = false;
+	maxFileSize: number = 1048576;
 	constructor(
 		private projectService: ProjectService,
 		private route: ActivatedRoute,
@@ -88,8 +90,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
 		this.projectService.createProject(this.formGroup.value)
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(
-				complete => this.onCallbackSuccess(),
-				error => this.onCallbackError(error)
+			complete => this.onCallbackSuccess(),
+			error => this.onCallbackError(error)
 			);
 	}
 
@@ -127,8 +129,8 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
 				this.projectService.delete(this.project.id)
 					.pipe(takeUntil(this._destroyed))
 					.subscribe(
-						complete => { this.onCallbackSuccess() },
-						error => this.onCallbackError(error)
+					complete => { this.onCallbackSuccess() },
+					error => this.onCallbackError(error)
 					);
 			}
 		});
@@ -186,18 +188,20 @@ export class ProjectEditorComponent extends BaseComponent implements OnInit, IBr
 
 	public previewImage(event): void {
 		const fileList: FileList | File = event.target.files;
-
+		const size: number = event.target.files[0].size;  // Get file size.
+		this.sizeError = size > this.maxFileSize;  // Checks if file size is valid.
 		const formdata: FormData = new FormData();
-
-		if (fileList instanceof FileList) {
-			for (let i = 0; i < fileList.length; i++) {
-				formdata.append('file', fileList[i]);
+		if (!this.sizeError){
+			if (fileList instanceof FileList) {
+				for (let i = 0; i < fileList.length; i++) {
+					formdata.append('file', fileList[i]);
+				}
+			} else {
+				formdata.append('file', fileList);
 			}
-		} else {
-			formdata.append('file', fileList);
-		}
-		this.projectFileUploadService.uploadFile(formdata)
+			this.projectFileUploadService.uploadFile(formdata)
 			.pipe(takeUntil(this._destroyed))
 			.subscribe(files => this.formGroup.get('files').patchValue(files));
+		}
 	}
 }