[DEV] add basic upload file component for the cover

front/src/app/app.module.ts

@@ -15,6 +15,7 @@ import { routing } from './app-routing.module';
 
 import { HelpComponent } from './help/help.component';
 import { AuthService } from './auth.service';
+import { UploadFileComponent } from './upload-file/upload-file.component';
 import { TopMenuComponent } from './top-menu/top-menu.component';
 import { ElementTypeComponent } from './element-type/element-type.component';
 import { ElementGroupComponent } from './element-group/element-group.component';
@@ -49,6 +50,7 @@ import { AppComponent } from './app.component';
 	declarations: [
 		AppComponent,
 		TopMenuComponent,
+		UploadFileComponent,
 		HelpComponent,
 		ElementTypeComponent,
 		ElementGroupComponent,

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

@@ -0,0 +1,11 @@
+<div>
+	<div class="uploadfilecontainer" (click)="fileInput.click()" appDragDrop (onFileDropped)="uploadFile($event)" >
+		<input hidden type="file" #fileInput (change)="uploadFile($event.target.files)">
+	</div>
+	<div  class="files-list" *ngFor="let file of files;let i=index">
+		<p>{{ file }}</p>
+		<button class="delete-file" (click)="deleteAttachment(i)">
+			// DELETE //
+		</button>
+	</div>
+</div>

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

@@ -0,0 +1,39 @@
+.uploadfilecontainer {
+	//background-image: url("../../assets/cloud-2044823_960_720.png");
+	background-repeat: no-repeat;
+	background-size: 100px;
+	background-position: center;
+	height: 200px;
+	width: 80%;
+	margin: 20px auto;
+	border: 2px dashed #1C8ADB;
+	border-radius: 10px;
+}
+
+.uploadfilecontainer:hover {
+	cursor: pointer;
+	background-color: #9ecbec !important;
+	opacity: 0.8;
+}
+
+.files-list {
+	display: flex;
+	justify-content: space-between;
+	width: 80%;
+	margin: 10px auto;
+	background: #ffffff;
+	border: 1px dashed;
+	border-radius: 12px;
+	padding: 5px;
+	color: #1c8adb;
+}
+
+.files-list .delete-file {
+	background: transparent;
+	border: none;
+	cursor: pointer;
+}
+
+.files-list .delete-file img{
+	width:30px;
+}

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

@@ -0,0 +1,20 @@
+import { Component} from '@angular/core';
+
+@Component({
+	selector: 'app-upload-file',
+	templateUrl: './upload-file.component.html',
+	styleUrls: ['./upload-file.component.less']
+})
+
+export class UploadFileComponent {
+	files: any = [];
+	uploadFile(event) {
+		for (let index = 0; index < event.length; index++) {
+			const element = event[index];
+			this.files.push(element.name)
+		}
+	}
+	deleteAttachment(index) {
+		this.files.splice(index, 1)
+	}
+}