Add File upload dialog

src/app/app.module.ts

@@ -65,8 +65,9 @@ import {MatDialogModule} from '@angular/material/dialog';
 import {MatTooltipModule} from '@angular/material/tooltip';
 import {MatExpansionModule} from '@angular/material/expansion';
 import {MatDatepickerModule} from '@angular/material/datepicker';
-import {MatNativeDateModule} from '@angular/material/';
+import {MatNativeDateModule, MatProgressBarModule} from '@angular/material/';
 import {MatSnackBarModule} from '@angular/material/snack-bar';
+import {DialogFileUploadComponent} from './components/profile/fileUpload/fileUpload.component';
 
 
 const config: SocketIoConfig = { url: 'http://localhost:4444', options: {} };
@@ -107,6 +108,7 @@ const appRoutes: Routes = [
     GroupComponent,
     DialogCreateEventComponent,
     UserlistComponent,
+    DialogFileUploadComponent,
   ],
   imports: [
     BrowserModule,
@@ -124,7 +126,7 @@ const appRoutes: Routes = [
     MatIconModule,
     BrowserAnimationsModule,
     MatSliderModule,
-    MatFormFieldModule ,
+    MatFormFieldModule,
     MatInputModule,
     ReactiveFormsModule,
     MatToolbarModule,
@@ -151,8 +153,13 @@ const appRoutes: Routes = [
     MatExpansionModule,
     MatDatepickerModule,
     MatSnackBarModule,
+    MatProgressBarModule,
+  ],
+  entryComponents: [
+    DialogCreateGroupComponent,
+    DialogCreateEventComponent,
+    DialogFileUploadComponent
   ],
-  entryComponents: [ DialogCreateGroupComponent, DialogCreateEventComponent ],
   providers: [],
   bootstrap: [AppComponent]
 })

src/app/components/profile/fileUpload/fileUpload.component.sass

@@ -0,0 +1,23 @@
+@import '../../../../styles/greenvironment-material-theme'
+
+.dialogFormField
+  width: 100%
+
+.confirmationButton
+  background-color: $primary-color
+
+.uploadDialogContent
+  overflow: hidden
+  text-align: center
+
+#inputPreview
+  max-width: 75%
+  max-height: 100%
+  width: auto
+  clip-path: circle()
+  mask-mode: luminance
+
+#inputPreviewWrapper
+  margin: auto
+  text-align: center
+  max-height: 512px

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

@@ -0,0 +1,79 @@
+import {Component, EventEmitter} from '@angular/core';
+import {MatDialogRef} from '@angular/material/dialog';
+import {SelfService} from '../../../services/selfservice/self.service';
+import {environment} from '../../../../environments/environment';
+import {BehaviorSubject} from 'rxjs';
+
+@Component({
+  selector: 'file-upload-dialog',
+  templateUrl: 'fileUploadDialog.component.html',
+  styleUrls: ['./fileUpload.component.sass'],
+})
+export class DialogFileUploadComponent {
+  public errorOccurred = false;
+  public uploading = false;
+  private errorMessage: string;
+  public profilePictureUrl: BehaviorSubject<string|null>;
+  private file;
+  public localFileUrl;
+
+  constructor(public dialogRef: MatDialogRef<DialogFileUploadComponent>, private selfService: SelfService) {
+    this.profilePictureUrl = new BehaviorSubject<string|null>(null);
+  }
+
+  /**
+   * Getter for the error message
+   */
+  getErrorMessage() {
+    return this.errorMessage;
+  }
+
+  /**
+   * Fired when the cancel button of the dialog is pressed
+   */
+  onCancelClicked() {
+    this.dialogRef.close();
+  }
+
+  /**
+   * Fired when the ok button was pressed
+   */
+  onOkClicked() {
+    this.errorOccurred = false;
+    this.uploading = true;
+    this.selfService.changeProfilePicture(this.file).subscribe((response) => {
+      this.uploading = false;
+      if (response.success) {
+        this.profilePictureUrl.next(environment.greenvironmentUrl + response.fileName);
+        this.dialogRef.close();
+      } else {
+        this.errorMessage = response.error;
+        this.errorOccurred = true;
+      }
+    }, (error) => {
+      this.uploading = false;
+      this.errorOccurred = true;
+      console.log(error);
+      if (error.error) {
+        this.errorMessage = error.error.error;
+      } else {
+        this.errorMessage = 'Failed to upload the profile picture.';
+      }
+    });
+  }
+
+  /**
+   * Fired when the input of the file select changes.
+   * @param event
+   */
+  onFileInputChange(event) {
+    this.errorOccurred = false;
+    this.errorMessage = '';
+    this.file = event.target.files[0];
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      this.localFileUrl = e.target.result;
+    };
+    reader.readAsDataURL(this.file);
+  }
+}

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

@@ -0,0 +1,16 @@
+<div id="file-upload-dialog">
+  <h1 mat-dialog-title align="center">Upload a new Profile picture!</h1>
+  <div class="uploadDialogContent" mat-dialog-content>
+    <input type="file" accept="image/*" (change)="onFileInputChange($event)" #name>
+    <div id="inputPreviewWrapper">
+      <h2 *ngIf="localFileUrl">Preview:</h2>
+      <img *ngIf="localFileUrl" id="inputPreview" [src]="localFileUrl"/>
+    </div>
+    <mat-progress-bar *ngIf="uploading" mode="indeterminate"></mat-progress-bar>
+  </div>
+  <mat-error *ngIf="errorOccurred">{{getErrorMessage()}}</mat-error>
+  <div mat-dialog-actions align="end">
+    <button mat-button (click)="onCancelClicked()">Cancel</button>
+    <button class="confirmationButton" mat-raised-button cdkFocusInitial (click)="onOkClicked()">Upload</button>
+  </div>
+</div>

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

@@ -3,27 +3,26 @@
         <!--on small screen-->
         <mat-toolbar id="toolbar" fxShow="true" fxHide.gt-sm="true">
             <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
-                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
                     <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>
                 </div>
-                
+
                 <span id="username">{{userProfile.username}}</span>
-                <button mat-icon-button 
+                <button mat-icon-button
-                class="request-button" 
+                class="request-button"
-                (click)="sendFriendRequest(userProfile)" 
+                (click)="sendFriendRequest(userProfile)"
                 [disabled]="!userProfile.allowedToSendRequest">
                     <mat-icon>person_add</mat-icon>
                 </button>
             </mat-toolbar-row>
-            <mat-toolbar-row> 
+            <mat-toolbar-row>
-                <div class="info-box"> 
+                <div class="info-box">
                     <span id="handle">@{{userProfile.handle}}</span>
-                </div>  
+                </div>
             </mat-toolbar-row>
             <mat-toolbar-row>
                 <div>
@@ -45,19 +44,18 @@
         <!--on big screen-->
         <mat-toolbar id="toolbar" fxShow="true" fxHide.lt-md="true">
             <mat-toolbar-row>
-                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="fileInput.click()">
+                <div class="hover-box" matTooltip="upload new picture" *ngIf="ownProfile" (click)="openFileUploadDialog()">
-                    <img class="profile-picture" [src]="userProfile.profilePicture"/>  
+                    <img class="profile-picture" [src]="userProfile.profilePicture"/>
                     <mat-icon id="icon">camera_alt</mat-icon>
-                    <input #fileInput type="file" accept="image/*" (change)="onFileInput($event)" style="display:none;" />
                 </div>
                 <div *ngIf="!ownProfile">
                     <img class="profile-picture" [src]="userProfile.profilePicture"/>
                 </div>
                 <span id="username">{{userProfile.username}}</span>
                 <span id="handle">@{{userProfile.handle}}</span>
-                <button mat-icon-button 
+                <button mat-icon-button
-                    class="request-button" 
+                    class="request-button"
-                    (click)="sendFriendRequest(userProfile)" 
+                    (click)="sendFriendRequest(userProfile)"
                     [disabled]="!userProfile.allowedToSendRequest">
                     <mat-icon>person_add</mat-icon>
                 </button>
@@ -72,20 +70,9 @@
             </mat-toolbar-row>
         </mat-toolbar>
         <div id="postlist">
-            <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>  
+            <feed-postlist [childPostList]="this.userProfile.posts"></feed-postlist>
         </div>
         <div id="profile">
-                
-                    <!--<table style="width:100%">
-                        <tr>
-                            <th>points </th>
-                            <th>action</th>
-                        </tr>
-                        <tr *ngFor= "let action of actionlist.actions">
-                            <td>{{action.points}}</td>
-                            <td>{{action.name}}</td>
-                        </tr>
-                    </table>-->
         </div>
     </div>
     <div id="profilecontainer" *ngIf="profileNotFound">
@@ -94,4 +81,3 @@
     <mat-spinner *ngIf="loading" style="margin:0 auto; margin-top: 10em;" diameter="100"></mat-spinner>
 </div>
 
-  

src/app/components/profile/profile.component.sass

@@ -8,7 +8,7 @@
   overflow: scroll
   overflow-x: hidden
 
-#profile 
+#profile
   padding: 2em
   max-width: 1200px
   margin: 0 auto
@@ -32,14 +32,14 @@
     font-size: 14px
     margin-left: calc(100px + 0.5em)
   .info
-    margin-right: 1em 
+    margin-right: 1em
     font-size: 14px
   #username
     margin: 0 0.5em
   #handle
     font-size: 14px
 
-#icon 
+#icon
   display: none
   position: absolute
   z-index: 11
@@ -71,9 +71,7 @@ $mat-card-header-size: 100px !default
     z-index: 10
     object-fit: cover
 
-
-
 #postlist
   margin: 0.5em auto
   padding: 0
-  max-width: 690px
+  max-width: 690px

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

@@ -9,13 +9,14 @@ import { HttpClient } from '@angular/common/http';
 import { environment } from 'src/environments/environment';
 import {MatSnackBar} from '@angular/material/snack-bar';
 import {SelfService} from '../../services/selfservice/self.service';
+import {MatDialog} from '@angular/material';
+import {DialogFileUploadComponent} from './fileUpload/fileUpload.component';
 
 @Component({
   selector: 'app-profile',
   templateUrl: './profile.component.html',
   styleUrls: ['./profile.component.sass']
 })
-
 export class ProfileComponent implements OnInit {
   levellist: Levellist = new Levellist();
   ownProfile = false;
@@ -34,7 +35,8 @@ export class ProfileComponent implements OnInit {
     private requestService: RequestService,
     private data: DatasharingService,
     private profileService: ProfileService,
-    private selfService: SelfService) {
+    private selfService: SelfService,
+    public dialog: MatDialog) {
       router.events.forEach((event) => {
         // check if the user is on the profile page (of userY) and routes to the page of userY (e.g. his own page)
         if (event instanceof NavigationEnd) {
@@ -71,13 +73,17 @@ export class ProfileComponent implements OnInit {
     this.requestService.sendFriendRequest(user);
   }
 
-  onFileInput(event) {
+  /**
-    this.selfService.changeProfilePicture(event.target.files[0]).subscribe((response) => {
+   * Opens the file upload dialog
-      this.userProfile.profilePicture = environment.greenvironmentUrl + response.fileName;
+   */
-    }, (error) => {
+  openFileUploadDialog() {
-      this._snackBar.open('failed to upload picture', 'okay', {
+    const dialogRef = this.dialog.open(DialogFileUploadComponent, {
-        duration: 3000
+      width: '400px'
-      });
+    });
+    dialogRef.componentInstance.profilePictureUrl.subscribe((profilePictureUrl) => {
+      if (profilePictureUrl) {
+        this.userProfile.profilePicture = profilePictureUrl;
+      }
     });
   }
 }