Add rough profile picture upload

src/app/components/profile/profile.component.html

@@ -3,9 +3,10 @@
         <!--on small screen-->
         <mat-toolbar color="primary" id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile">
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
                     <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
+                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" src="https://material.angular.io/assets/img/examples/shiba1.jpg"/>

src/app/components/profile/profile.component.ts

@@ -5,6 +5,7 @@ import { Levellist } from 'src/app/models/levellist';
 import { RequestService } from 'src/app/services/request/request.service';
 import { DatasharingService } from '../../services/datasharing.service';
 import { ProfileService } from 'src/app/services/profile/profile.service';
+import { HttpClient } from '@angular/common/http';
 
 @Component({
   selector: 'app-profile',
@@ -24,6 +25,7 @@ export class ProfileComponent implements OnInit {
   loading = false;
 
   constructor(
+    private http: HttpClient,
     private router: Router,
     private requestService: RequestService,
     private data: DatasharingService,
@@ -65,4 +67,14 @@ export class ProfileComponent implements OnInit {
     user.allowedToSendRequest = false;
     this.requestService.sendFriendRequest(user);
   }
+  onFileInput(event) {
+    console.log(event.target.files[0]);
+    const formData: any = new FormData();
+    formData.append('profilePicture', event.target.files[0]);
+
+    this.http.post('https://greenvironment.net/upload', formData).subscribe(
+    (response) => console.log(response),
+    (error) => console.log(error)
+  );
+  }
 }