Add error snackbar for picture upload

src/app/app.module.ts

@@ -66,6 +66,7 @@ import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatDatepickerModule} from '@angular/material/datepicker';
 import {MatNativeDateModule} from '@angular/material/';
+import {MatSnackBarModule} from '@angular/material/snack-bar';
 
 // import logo from 'src/assets/gv-new-logo.svg';
 import logo from '!!raw-loader!./gv-new-logo-white.svg';
@@ -150,7 +151,8 @@ const appRoutes: Routes = [
     MatDialogModule,
     MatTooltipModule,
     MatExpansionModule,
-    MatDatepickerModule
+    MatDatepickerModule,
+    MatSnackBarModule,
   ],
   entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ],
   providers: [],

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

@@ -6,7 +6,7 @@
                 <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
+                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>
@@ -48,7 +48,7 @@
                 <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>  
                     <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" (change)="onFileInput($event)" style="display:none;" />
+                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>

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

@@ -7,6 +7,8 @@ import { DatasharingService } from '../../services/datasharing.service';
 import { ProfileService } from 'src/app/services/profile/profile.service';
 import { HttpClient } from '@angular/common/http';
 import { environment } from 'src/environments/environment';
+import {MatSnackBar} from '@angular/material/snack-bar';
+import { reduce } from 'rxjs/operators';
 
 @Component({
   selector: 'app-profile',
@@ -27,6 +29,7 @@ export class ProfileComponent implements OnInit {
 
   constructor(
     private http: HttpClient,
+    private _snackBar: MatSnackBar,
     private router: Router,
     private requestService: RequestService,
     private data: DatasharingService,
@@ -75,9 +78,12 @@ export class ProfileComponent implements OnInit {
 
     this.http.post(environment.greenvironmentUrl + '/upload', formData).subscribe(
      (response: any) => {
-      this.userProfile.profilePicture = environment.greenvironmentUrl + response.filename;
+      this.userProfile.profilePicture = environment.greenvironmentUrl + response.fileName;
     },
-    (error) => console.log(error)
+    (error) => {
-  );
+      this._snackBar.open('failed to upload picture', 'okay', {
+      duration: 3000
+      });
+    });
   }
 }