Merge branch 'master' of Software_Engineering_I/greenvironment-frontend into max_dev

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

@@ -39,27 +39,32 @@ export class DialogFileUploadComponent {
    * 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;
+    if (this.file) {
+      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;
-      }
-    }, (error) => {
-      this.uploading = false;
+        console.log(error);
+        if (error.error) {
+          this.errorMessage = error.error.error;
+        } else {
+          this.errorMessage = 'Failed to upload the profile picture.';
+        }
+      });
+    } else {
       this.errorOccurred = true;
-      console.log(error);
-      if (error.error) {
-        this.errorMessage = error.error.error;
-      } else {
-        this.errorMessage = 'Failed to upload the profile picture.';
-      }
-    });
+      this.errorMessage = 'Please select a file to upload.';
+    }
   }
 
   /**

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

@@ -1,7 +1,8 @@
 <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>
+    <input style="display: none" id="input-file" type="file" accept="image/*" (change)="onFileInputChange($event)" #name>
+    <label for="input-file" class="mat-button mat-raised-button mat-primary">Choose File</label>
     <div id="inputPreviewWrapper">
       <h2 *ngIf="localFileUrl">Preview:</h2>
       <img *ngIf="localFileUrl" id="inputPreview" [src]="localFileUrl"/>