[DEV] update upload interface

front/angular.json

@@ -175,7 +175,7 @@
   "schematics" : {
     "@schematics/angular:component" : {
       "prefix" : "app",
-      "styleext" : "less"
+      "style" : "less"
     },
     "@schematics/angular:directive" : {
       "prefix" : "app"

front/package.json

@@ -12,42 +12,42 @@
   },
   "private": true,
   "dependencies": {
-    "@angular/animations": "~9.0.5",
-    "@angular/cdk": "^9.1.1",
-    "@angular/common": "~9.0.5",
-    "@angular/compiler": "~9.0.5",
-    "@angular/core": "~9.0.5",
-    "@angular/forms": "~9.0.5",
-    "@angular/material": "~9.1.1",
-    "@angular/platform-browser": "~9.0.5",
-    "@angular/platform-browser-dynamic": "~9.0.5",
-    "@angular/router": "^9.0.5",
+    "@angular/animations": "~10.1.5",
+    "@angular/common": "~10.1.5",
+    "@angular/compiler": "~10.1.5",
+    "@angular/core": "~10.1.5",
+    "@angular/forms": "~10.1.5",
+    "@angular/platform-browser": "~10.1.5",
+    "@angular/platform-browser-dynamic": "~10.1.5",
+    "@angular/cdk": "^10.2.5",
+    "@angular/material": "^10.2.5",
+    "@angular/router": "^10.1.5",
     "core-js": "^3.6.4",
     "jquery": "^3.5.1",
     "ngx-select-dropdown": "^1.4.4",
     "rxjs": "^6.5.4",
-    "tslib": "^1.11.1",
-    "zone.js": "~0.9.1"
+    "tslib": "^2.0.0",
+    "zone.js": "~0.10.3"
   },
   "devDependencies": {
-    "@angular-devkit/build-angular": "^0.901.9",
-    "@angular/cli": "^9.0.5",
-    "@angular/compiler-cli": "~9.0.5",
-    "@angular/language-service": "~9.0.5",
+    "@angular-devkit/build-angular": "^0.1001.6",
+    "@angular/cli": "^10.1.6",
+    "@angular/compiler-cli": "~10.1.5",
+    "@angular/language-service": "~10.1.5",
     "@types/jasmine": "^3.5.8",
     "@types/jasminewd2": "^2.0.8",
     "@types/node": "^13.7.7",
     "codelyzer": "^5.0.1",
-    "jasmine-core": "^3.5.0",
-    "jasmine-spec-reporter": "^4.2.1",
-    "karma": "^4.4.1",
-    "karma-chrome-launcher": "^3.1.0",
-    "karma-coverage-istanbul-reporter": "^2.1.1",
-    "karma-jasmine": "^2.0.1",
-    "karma-jasmine-html-reporter": "^1.5.2",
-    "protractor": "^5.4.3",
+    "jasmine-core": "~3.5.0",
+    "jasmine-spec-reporter": "~5.0.0",
+    "karma": "~5.0.0",
+    "karma-chrome-launcher": "~3.1.0",
+    "karma-coverage-istanbul-reporter": "~3.0.2",
+    "karma-jasmine": "~4.0.0",
+    "karma-jasmine-html-reporter": "^1.5.0",
+    "protractor": "~7.0.0",
     "ts-node": "^8.6.2",
-    "tslint": "^5.20.1",
-    "typescript": "~3.6.5"
+    "tslint": "~6.1.0",
+    "typescript": "~4.0.3"
   }
 }

front/src/app/app-routing.module.ts

@@ -3,9 +3,8 @@
  * @copyright 2018, Edouard DUPIN, all right reserved
  * @license PROPRIETARY (see license file)
  */
-
 import { NgModule } from '@angular/core';
-import { RouterModule, Routes } from '@angular/router';
+import { Routes, RouterModule } from '@angular/router'; // CLI imports router
 import { ModuleWithProviders } from '@angular/core';
 
 import { HomeComponent } from './scene/home/home';
@@ -17,12 +16,14 @@ import { VideoComponent } from './scene/video/video';
 import { LoginComponent } from './scene/login/login';
 import { SignUpComponent } from './scene/sign-up/sign-up';
 import { SettingsComponent } from './scene/settings/settings';
+import { UploadScene } from './scene/upload/upload';
 import { VideoEditComponent } from './scene/video-edit/video-edit';
 import { GroupEditComponent } from './scene/group-edit/group-edit';
 import { SaisonEditComponent } from './scene/saison-edit/saison-edit';
-import { UploadScene } from './scene/upload/upload';
 //import { HelpComponent } from './help/help.component';
 
+// see https://angular.io/guide/router
+
 
 const routes: Routes = [
 	{ path: '', redirectTo: '/home', pathMatch: 'full'},
@@ -59,5 +60,11 @@ const routes: Routes = [
 export class AppRoutingModule {}
 */
 
-export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
-
+@NgModule({
+  imports: [RouterModule.forRoot(routes)],
+  exports: [RouterModule]
+})
+export class AppRoutingModule { }
+//export const routing: ModuleWithProviders = RouterModule.forRoot(routes);
+		
+		

front/src/app/app.module.ts

@@ -10,10 +10,14 @@ import { RouterModule } from '@angular/router';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { HttpClientModule } from '@angular/common/http';
 import { FormsModule, ReactiveFormsModule } from '@angular/forms';
-import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
-import { routing } from './app-routing.module';
+import { AppRoutingModule } from './app-routing.module';
 import { SelectDropDownModule } from 'ngx-select-dropdown'
 
+// see here: https://material.angular.io/components/categories
+
+import { MatProgressSpinnerModule } from '@angular/material/progress-spinner';
+//import { MatProgressBarModule } from '@angular/material/progress-bar';
+
 import { UploadFileComponent } from './component/upload-file/upload-file';
 import { TopMenuComponent } from './component/top-menu/top-menu';
 import { ElementTypeComponent } from './component/element-type/element-type';
@@ -21,6 +25,7 @@ import { ElementGroupComponent } from './component/element-group/element-group';
 import { ElementSaisonComponent } from './component/element-saison/element-saison';
 import { ElementVideoComponent } from './component/element-video/element-video';
 import { CreateTypeComponent } from './component/create-type/create-type';
+import { PopInUploadProgress } from './component/upload-progress/upload-progress';
 import { PopInComponent } from './component/popin/popin';
 
 import { HelpComponent } from './scene/help/help';
@@ -84,13 +89,14 @@ import { AppComponent } from './app.component';
 		SaisonEditComponent,
 		GroupEditComponent,
 		PopInComponent,
+		PopInUploadProgress,
 		CreateTypeComponent,
 		UploadScene
 		],
 	imports: [
 		BrowserModule,
 		RouterModule,
-		routing,
+		AppRoutingModule,
 		BrowserAnimationsModule,
 		HttpClientModule,
 		FormsModule,

front/src/app/component/create-type/create-type.html

@@ -8,7 +8,7 @@
 	       (callback)="eventPopUp($event[0])">
 		<mat-spinner></mat-spinner>
 
-<p class="expand">
+		<p class="expand">
 			<label class="unselectable">Name: </label><br/>
 			<input type="text"
 			       placeholder="Name of the Type"

front/src/app/component/popin/popin.html

@@ -2,7 +2,7 @@
 	<div class="element {{popSize}}">
 		<div class="header">
 			<label class="unselectable">{{popTitle}}</label>
-			<div class="close">
+			<div class="close" *ngIf="closeTopRight == true" >
 				<button class="button-close color-shadow-black" (click)="onCloseTop()" type="submit">
 					<label class="unselectable"><i class="material-icons">close</i></label>
 				</button>

front/src/app/component/upload-progress/.less

@@ -0,0 +1,12 @@
+
+
+.expand {
+	width: 100%;
+	input {
+		width: 100%;
+	};
+	textarea {
+		width: 100%;
+	};
+}
+

front/src/app/component/upload-progress/upload-progress.html

@@ -0,0 +1,18 @@
+<div>
+	<popin id="popin-upload-progress"
+	       popSize="medium"
+	       popTitle="Upload Media File"
+	       closeTitle="Abort"
+	       (callback)="eventPopUp($event[0])">
+		<p class="expand">
+			<label class="unselectable">{{mediaTitle}}</label>
+		</p>
+		<div class="progress-back">
+ 				<div class="progress-bar" style="width:{{progress}}%">&nbsp;&nbsp;&nbsp;{{progress}}%</div>
+		</div>
+		<p>
+			<label class="unselectable">upload:&nbsp;{{mediaUploaded}} Bytes</label><br/>
+			<label class="unselectable">size:&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;{{mediaSize}} Bytes</label>
+		</p>
+	</popin>
+</div>

front/src/app/component/upload-progress/upload-progress.less

@@ -0,0 +1,23 @@
+
+
+.expand {
+	width: 100%;
+	input {
+		width: 100%;
+	};
+	textarea {
+		width: 100%;
+	};
+}
+
+.progress-back {
+	color:#000!important;
+	background-color:#f1f1f1!important;
+	border-radius: 3px; 
+}
+
+.progress-bar {
+	color:#000000!important;
+	background-color:#4CAF50!important;
+	border-radius: 3px; 
+}

front/src/app/component/upload-progress/upload-progress.ts

@@ -0,0 +1,50 @@
+/** @file
+ * @author Edouard DUPIN
+ * @copyright 2018, Edouard DUPIN, all right reserved
+ * @license PROPRIETARY (see license file)
+ */
+import { Injectable, Component, OnInit, Input, SimpleChanges } from '@angular/core';
+
+//import { AppRoutingModule } from "../app-routing.module";
+
+import { Router } from "@angular/router";
+import { ActivatedRoute, Params } from '@angular/router';
+import { TypeService } from '../../service/type';
+import { PopInService } from '../../service/popin';
+
+@Component({
+	selector: 'upload-progress',
+	templateUrl: './upload-progress.html',
+	styleUrls: ['./upload-progress.less']
+})
+
+@Injectable()
+export class PopInUploadProgress implements OnInit {
+	
+	@Input() mediaTitle: string = "";
+	@Input() mediaUploaded: number = 0;
+	@Input() mediaSize: number = 999999999999;
+	private progress: number = 0;
+	constructor(private router: Router,
+	            private popInService: PopInService) {
+		
+	}
+	OnDestroy() {
+		
+	}
+	ngOnInit() {
+		
+	}
+	eventPopUp(_event: string): void {
+		console.log("GET event: " + _event);
+		this.popInService.close("popin-upload-progress");
+	}
+	updateNeedSend():void {
+		
+	}
+	ngOnChanges(changes: SimpleChanges) {
+		this.progress = Math.trunc(this.mediaUploaded*100/this.mediaSize)
+		console.log("ooooooooooo " + this.progress);
+		console.log("ooooooooooo " + changes);
+	}
+}

front/src/app/scene/upload/upload.html

@@ -129,7 +129,15 @@
 				<i class="material-icons">cloud_upload</i> Upload
 			</button>
 		</div>
+		
 		<div class="clear"></div>
 	</div>
 </div>
-
+<upload-progress [mediaTitle]="uploadLabelMediaTitle"
+	[mediaUploaded]="uploadMediaSendSize"
+	[mediaSize]="uploadMediaSize"></upload-progress>
+<!--
+TODO: add a pop-in with:
+  - upload done
+  - upload error
+-->

front/src/app/scene/upload/upload.ts

@@ -45,7 +45,6 @@ export class UploadScene implements OnInit {
 
 	error: string = "";
 
-	coverFile: File;
 	mediaFile: File = null;
 	upload_file_value: string = ""
 	selectedFiles: FileList;
@@ -54,6 +53,12 @@ export class UploadScene implements OnInit {
 	need_send: boolean = false;
 
 	covers_display: Array<any> = [];
+	
+	// section tha define the upload value to display in the pop-in of upload 
+	uploadLabelMediaTitle: string = "";
+	uploadMediaSendSize: number = 0;
+	uploadMediaSize: number = 0;
+	
 
 	listType: ElementList[] = [
 		{ value: undefined, label: '---' },
@@ -151,9 +156,7 @@ export class UploadScene implements OnInit {
 			.then(function (response3) {
 				for (let iii = 0; iii < response3.length; iii++) {
 					self.listGroup.push({ value: response3[iii].id, label: response3[iii].name });
-					self.listGroup2 = [...self.listGroup2,{ id: response3[iii].id, description: response3[iii].name }];
-					//self.listGroup2.push(response3[iii].name);
-					console.log("[" + self.data_id + "] Get serie: " + response3[iii].id + ", label:" + response3[iii].name)
+					console.log("Get serie: " + response3[iii].id + ", label:" + response3[iii].name)
 				}
 			}).catch(function (response3) {
 				console.log("get response3 : " + JSON.stringify(response3, null, 2));
@@ -270,45 +273,8 @@ export class UploadScene implements OnInit {
 	}
 	
 	sendFile(): void {
-		
-	}
-	sendValues (): void {
-		console.log("send new values....");
-		let data = {}
-		if (this.data.name != this.data_ori.name) {
-			data["name"] = this.data.name;
-		}
-		if (this.data.description != this.data_ori.description) {
-			data["description"] = this.data.description;
-		}
-		if (this.data.episode != this.data_ori.episode) {
-			data["episode"] = this.data.episode;
-		}
-		if (this.data.time != this.data_ori.time) {
-			data["time"] = this.data.time;
-		}
-		if (this.data.type_id != this.data_ori.type_id) {
-			data["type_id"] = this.data.type_id;
-		}
-		if (this.data.univers_id != this.data_ori.univers_id) {
-			data["univers_id"] = this.data.univers_id;
-		}
-		if (this.data.serie_id != this.data_ori.serie_id) {
-			data["serie_id"] = this.data.serie_id;
-		}
-		if (this.data.saison_id != this.data_ori.saison_id) {
-			data["saison_id"] = this.data.saison_id;
-		}
-		let tmpp = this.data.clone();
-		let self = this;
-		this.videoService.put(this.id_video, data)
-			.then(function (response3) {
-				self.data_ori = tmpp;
-				self.updateNeedSend();
-			}).catch(function (response3) {
-				console.log("get response22 : " + JSON.stringify(response3, null, 2));
-				self.updateNeedSend();
-			});
+		console.log("Send file requested ... " + this.mediaFile);
+		this.uploadFile(this.mediaFile);
 	}
 
 	// At the drag drop area
@@ -408,21 +374,86 @@ export class UploadScene implements OnInit {
 			return;
 		}
 		let self = this;
-		this.dataService.sendFile(_file)
-			.then(function (response) {
-				console.log("get response of video : " + JSON.stringify(response, null, 2));
-				let id_of_image = response.id;
-				self.videoService.addCover(self.id_video, id_of_image)
-					.then(function (response) {
-						console.log("cover added");
-						self.covers_display.push(self.videoService.getCoverUrl(id_of_image));
-					}).catch(function (response) {
-						console.log("Can not cover in the cover_list...");
-					});
-			}).catch(function (response) {
-				//self.error = "Can not get the data";
-				console.log("Can not add the data in the system...");
-			});
+
+	    const formData = new FormData();
+	    formData.append('file_name', _file.name);
+	    formData.append('universe', this.parse_universe);
+	    formData.append('serie', this.parse_serie);
+	    if (this.parse_saison != null) {
+	    	formData.append('saison', this.parse_saison.toString());
+	    }
+	    if (this.parse_episode != null) {
+	    	formData.append('episode', this.parse_episode.toString());
+	    }
+	    formData.append('title', this.parse_title);
+
+	    if (this.type_id != null) {
+	    	formData.append('type_id', this.type_id.toString());
+	    }
+	    formData.append('file', _file);
+		/*
+		this.parse_serie = "";
+		this.parse_saison = null;
+		this.parse_episode = null;
+		this.parse_title = "";
+		*/
+		// clean uopload labels
+		this.uploadMediaSendSize = 0;
+    	this.uploadMediaSize = 0;
+		this.uploadLabelMediaTitle = "";
+		// add univers
+		if (this.parse_universe != null) {
+			this.uploadLabelMediaTitle += this.parse_universe;
+		}
+		// add serie
+		if (this.parse_serie != null) {
+			if (this.uploadLabelMediaTitle.length != 0) {
+				this.uploadLabelMediaTitle += "/";
+			}
+			this.uploadLabelMediaTitle += this.parse_serie;
+		}
+		// add saison
+		if (this.parse_saison != null) {
+			if (this.uploadLabelMediaTitle.length != 0) {
+				this.uploadLabelMediaTitle += "-";
+			}
+			this.uploadLabelMediaTitle += "s" + this.parse_saison.toString();
+		}
+		// add episode ID
+		if (this.parse_episode != null) {
+			if (this.uploadLabelMediaTitle.length != 0) {
+				this.uploadLabelMediaTitle += "-";
+			}
+			this.uploadLabelMediaTitle += "e" + this.parse_episode.toString();
+		}
+		// add title
+		if (this.uploadLabelMediaTitle.length != 0) {
+			this.uploadLabelMediaTitle += "-";
+		}
+		this.uploadLabelMediaTitle += this.parse_title;
+		// display the upload pop-in
+		this.popInService.open("popin-upload-progress");
+		this.dataService.uploadFile(formData, function(count, total) {
+	    	console.log("upload : " + count*100/total);
+	    	self.uploadMediaSendSize = count;
+	    	self.uploadMediaSize = total;
+	    	
+	    })
+		.then(function (response) {
+			console.log("get response of video : " + JSON.stringify(response, null, 2));
+			let id_of_image = response.id;
+			/*
+				.then(function (response) {
+					console.log("cover added");
+					self.covers_display.push(self.videoService.getCoverUrl(id_of_image));
+				}).catch(function (response) {
+					console.log("Can not cover in the cover_list...");
+				});
+			*/
+		}).catch(function (response) {
+			//self.error = "Can not get the data";
+			console.log("Can not add the data in the system...");
+		});
 	}
 	removeCover (_id) {
 		console.log("Request remove cover: " + _id);

front/src/app/scene/video-edit/video-edit.html

@@ -168,21 +168,8 @@
 	</div>
 </div>
 
-<!--
-<popin id="popin-new-saison"
-       popTitle="Create a new saison"
-       closeTopRight="true"
-       closeTitle="close title"
-       validateTitle="Validate"
-       saveTitle="Save"
-       otherTitle="Other"
-       (callback)="eventPopUp($event[0])">
-    <p>
-        Home page text: <input type="text" [(ngModel)]="bodyText" />
-    </p>
-    <button (click)="closeModal('custom-modal-1');">Close</button>
-</popin>
--->
+<create-type ></create-type>
+
 <popin id="popin-new-saison"
        popTitle="Create a new saison"
        closeTopRight="true"
@@ -206,7 +193,6 @@
     </p>
 </popin>
 
-<create-type ></create-type>
 
 <popin id="popin-new-univers"
        popSize="big"

front/src/app/service/data.ts

@@ -17,15 +17,20 @@ export class DataService {
 	
 	getData():any {
 		return this.http.get_specific(this.serviceName);
-	};
+	}
 	
 	get(_id:number):any {
 		return this.http.get_specific(this.serviceName, _id);
-	};
+	}
 	
 	sendFile(_file:File) {
 		//return this.http.uploadFileMultipart(this.serviceName, null, _file);
 		return this.http.uploadFileBase64(this.serviceName, null, _file);
 	}
+	
+	uploadFile(_form:FormData, _progress:any = null) {
+		//return this.http.uploadFileMultipart(this.serviceName, null, _file);
+		return this.http.uploadMultipart(this.serviceName + "/upload/", _form, _progress);
+	}
 }
 

front/src/app/service/http-wrapper.ts

@@ -1,6 +1,6 @@
 import { Injectable } from '@angular/core';
 
-import { HttpClient, HttpHeaders, HttpParams, HttpRequest, HttpEvent} from '@angular/common/http';
+import { HttpClient, HttpHeaders, HttpParams, HttpRequest, HttpEvent, HttpEventType} from '@angular/common/http';
 import { catchError, map, tap } from 'rxjs/operators';
 import {Observable} from "rxjs";
 
@@ -82,99 +82,64 @@ export class HttpWrapperService {
 			});
 	}
 	
-	post(_uriRest:string, _headerOption:any, _data:any) {
+	post(_uriRest:string, _headerOption:any, _data:any, _progress:any = null) {
 		this.addTokenIfNeeded(_headerOption);
 		let connectionAdresse = this.createRESTCall(_uriRest, {});
 		
-		if (false) {
-			const httpOption = {
-				headers: new HttpHeaders(_headerOption)
-			};
-			return new Promise((resolve, reject) => {
-				if (this.displayReturn == true) {
-					console.log("call POST " + connectionAdresse + " data=" + JSON.stringify(_data, null, 2));
-				}
-				let request = this.http.post<any>(connectionAdresse, _data, httpOption);
-				let self = this;
-				request.subscribe((res: any) => {
-						if (self.displayReturn == true) {
-							console.log("!! data " + JSON.stringify(res, null, 2));
-						}
-						if (res) {
-							if (res.httpCode) {
-								resolve({status:res.httpCode, data:res});
-							} else {
-								resolve({status:200, data:res});
-							}
+
+		return new Promise((resolve, reject) => {
+			if (this.displayReturn == true) {
+				console.log("call POST " + connectionAdresse + " data=" + JSON.stringify(_data, null, 2));
+			}
+			let request = this.http.post(connectionAdresse, _data, {  
+				  headers: new HttpHeaders(_headerOption),
+			      reportProgress: true,  
+			      observe: 'events'  
+			    });
+			let self = this;
+			request.subscribe((res: any) => {
+					if (self.displayReturn == true) {
+						console.log("!! data " + JSON.stringify(res, null, 2));
+					}
+			        if (res.type === HttpEventType.UploadProgress) {
+			            console.log("post : " + res.loaded + " / " +  res.total);
+			            _progress(res.loaded, res.total);
+			            return;
+			        }
+					if (res) {
+						if (res.httpCode) {
+							resolve({status:res.httpCode, data:res});
 						} else {
-							resolve({status:200, data:""});
+							resolve({status:200, data:res});
 						}
-					},
-					error => {
-						if (self.displayReturn == true) {
-							console.log("an error occured status: " + error.status);
-							console.log("answer: " + JSON.stringify(error, null, 2));
-						}
-						reject({status:error.status, data:error.error});
-					});
+					} else {
+						resolve({status:200, data:""});
+					}
+				},
+				error => {
+					if (self.displayReturn == true) {
+						console.log("an error occured status: " + error.status);
+						console.log("answer: " + JSON.stringify(error, null, 2));
+					}
+					reject({status:error.status, data:error.error});
 				});
-		} else {
+			/*
 
-			const httpOption = {
-					headers: new HttpHeaders(_headerOption),
-			    reportProgress: true,
-			    observe: 'events'
-			};
-			return new Promise((resolve, reject) => {
-				if (this.displayReturn == true) {
-					console.log("call POST " + connectionAdresse + " data=" + JSON.stringify(_data, null, 2));
-				}
-				let request = this.http.post<any>(connectionAdresse, _data, httpOption);
-				let self = this;
-				request.subscribe((res: any) => {
-						if (self.displayReturn == true) {
-							console.log("!! data " + JSON.stringify(res, null, 2));
-						}
-						if (res) {
-							if (res.httpCode) {
-								resolve({status:res.httpCode, data:res});
-							} else {
-								resolve({status:200, data:res});
-							}
-						} else {
-							resolve({status:200, data:""});
-						}
-					},
-					error => {
-						if (self.displayReturn == true) {
-							console.log("an error occured status: " + error.status);
-							console.log("answer: " + JSON.stringify(error, null, 2));
-						}
-						reject({status:error.status, data:error.error});
-					});
-				});
-		}
-		/*
-	    return this.http.post<any>(uploadURL, data, {
-		      reportProgress: true,
-		      observe: 'events'
-		    }).pipe(map((event) => {
+			      switch (event.type) {
 
-		      switch (event.type) {
+			        case HttpEventType.UploadProgress:
+			          const progress = Math.round(100 * event.loaded / event.total);
+			          return { status: 'progress', message: progress };
 
-		        case HttpEventType.UploadProgress:
-		          const progress = Math.round(100 * event.loaded / event.total);
-		          return { status: 'progress', message: progress };
-
-		        case HttpEventType.Response:
-		          return event.body;
-		        default:
-		          return `Unhandled event: ${event.type}`;
-		      }
-		    })
-		    );
-		  }
-		  */
+			        case HttpEventType.Response:
+			          return event.body;
+			        default:
+			          return `Unhandled event: ${event.type}`;
+			      }
+			    })
+			    );
+			    */
+			});
 	}
 	put(_uriRest:string, _headerOption:any, _data:any) {
 		this.addTokenIfNeeded(_headerOption);
@@ -263,6 +228,10 @@ export class HttpWrapperService {
 			headers.append('Content-Type', "image/jpeg");
 		} else if (extention == "png") {
 			headers.append('Content-Type', "image/png");
+		} else if (extention == "mkv") {
+			headers.append('Content-Type', "video/x-matroska");
+		} else if (extention == "webm") {
+			headers.append('Content-Type', "video/webm");
 		} else {
 			return null;
 		}
@@ -321,6 +290,12 @@ export class HttpWrapperService {
 					//headers.append('Content-Type', "image/png");
 					headers['Content-Type'] = "image/png";
 					headers['mime-type'] = "image/png";
+				} else if (extention == "mkv") {
+					headers['Content-Type'] = "video/x-matroska";
+					headers['mime-type'] = "video/x-matroska";
+				} else if (extention == "webm") {
+					headers['Content-Type'] = "video/webm";
+					headers['mime-type'] = "video/webm";
 				} else {
 					return null;
 				}
@@ -345,6 +320,91 @@ export class HttpWrapperService {
 			};
 		});
 	}
+	uploadFile(_base:string, _file:File): any {
+		console.log("Upload file to " + _base);
+		
+		let url = _base;
+		let self = this;
+		let reader = new FileReader();
+		reader.readAsArrayBuffer(_file);
+		return new Promise((resolve, reject) => {
+			reader.onload = () => {
+				let headers = {};//new Headers();
+				console.log("upload filename : " + _file.name);
+				let extention = _file.name.split('.').pop();
+				if (extention == "jpg") {
+					//headers.append('Content-Type', "image/jpeg");
+					headers['Content-Type'] = "image/jpeg";
+					headers['mime-type'] = "image/jpeg";
+				} else if (extention == "jpeg") {
+					//headers.append('Content-Type', "image/jpeg");
+					headers['Content-Type'] = "image/jpeg";
+					headers['mime-type'] = "image/jpeg";
+				} else if (extention == "webp") {
+					//headers.append('Content-Type', "image/webp");
+					headers['Content-Type'] = "image/webp";
+					headers['mime-type'] = "image/webp";
+				} else if (extention == "png") {
+					//headers.append('Content-Type', "image/png");
+					headers['Content-Type'] = "image/png";
+					headers['mime-type'] = "image/png";
+				} else if (extention == "mkv") {
+					headers['Content-Type'] = "video/x-matroska";
+					headers['mime-type'] = "video/x-matroska";
+				} else if (extention == "webm") {
+					headers['Content-Type'] = "video/webm";
+					headers['mime-type'] = "video/webm";
+				} else {
+					return null;
+				}
+				//headers.append('filename', _file.name);
+				headers['filename'] = _file.name;
+				
+				self.post(url, headers, reader.result)
+					.then(function(response: any) {
+						console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2));
+						if (response.status == 200) {
+							resolve(response.data);
+							return;
+						}
+						reject("An error occured");
+					}, function(response: any) {
+						if (typeof response.data === 'undefined') {
+							reject("return ERROR undefined");
+						} else {
+							reject("return ERROR ...");// + JSON.stringify(response, null, 2));
+						}
+					});
+			};
+		});
+	}
+	uploadMultipart(_base:string, _multipart:FormData, _progress:any): any {
+		console.log("Upload multipart to " + _base);
+		
+		let url = _base;
+		let self = this;
+		return new Promise((resolve, reject) => {
+			let headers = {
+					//'Content-Type': 'multipart/form-data',
+					};//new Headers();
+			
+			self.post(url, headers, _multipart, _progress)
+				.then(function(response: any) {
+					console.log("URL: " + url + "\nRespond(" + response.status + "): " + JSON.stringify(response.data, null, 2));
+					if (response.status == 200) {
+						resolve(response.data);
+						return;
+					}
+					reject("An error occured");
+				}, function(response: any) {
+					if (typeof response.data === 'undefined') {
+						reject("return ERROR undefined");
+					} else {
+						reject("return ERROR ...");// + JSON.stringify(response, null, 2));
+					}
+				});
+		});
+	}
 	/*
 	public upload(_base:string, _id:number, _file:File): any {
 		data, userId) {

front/tsconfig.json

@@ -17,7 +17,7 @@
       "es2017",
       "dom"
     ],
-    "module": "esnext",
+    "module": "es2020",
     "baseUrl": "./"
   }
 }

front/tslint.json

@@ -72,7 +72,6 @@
     "no-trailing-whitespace": true,
     "no-unnecessary-initializer": true,
     "no-unused-expression": true,
-    "no-use-before-declare": true,
     "no-var-keyword": true,
     "object-literal-sort-keys": false,
     "one-line": [