Add file input in feed

src/app/components/feed/feed.component.html

@@ -6,12 +6,23 @@
   <div [hidden]="!loggedIn">
     <mat-card>
       <mat-card-content>
+        <div id="inputPreviewWrapper">
+          <h2 *ngIf="localFileUrl">Preview:</h2>
+          <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
+          <video *ngIf="fileType == 'video'"  [src]="localFileUrl" controls="" class="html5-video-player">
+            Your browser does not support playing HTML5 video.
+            You can <a href="https://files.catbox.moe/m6gsbb.mp4" download="">download the file</a> instead.
+          </video>
+        </div>
         <mat-form-field id="input">
           <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue"
                     mat-autosize="true" matAutosizeMaxRows="3" placeholder="post something"></textarea>
-          <button mat-button matSuffix mat-icon-button>
+          <button mat-button matSuffix mat-icon-button (click)="name.click()"
-            <mat-icon>add</mat-icon>
+            matTooltip="upload a picture or video (up to 10MB)"
+            matTooltipShowDelay="200">
+            <mat-icon>attach_file</mat-icon>
           </button>
+          <input style="display: none" id="input-file" type="file" accept="video/*,image/*" (change)="onFileInputChange($event)" #name>
         </mat-form-field>
         <p id="check">
           <mat-checkbox color="primary" [(ngModel)]="checked" checked="checked">I protected the environment.

src/app/components/feed/feed.component.sass

@@ -16,6 +16,7 @@
   width: 100%
   padding: 0.5em
 
+
 ::ng-deep .mat-option
   touch-action: auto !important
 
@@ -30,6 +31,26 @@
   width: 100%
   padding-left: 0.5em
   padding-right: 0.5em
+  .mat-icon
+    transform: scale(1.5)
+#inputPreview
+  max-width: 75%
+  max-height: 100%
+  width: auto
+  border-radius: 4px
+  mask-mode: luminance
+  outline: none
+  user-select: none
+::ng-deep video
+  width: 100%
+  max-height: 40vh
+  outline: none
+  user-select: none
+#inputPreviewWrapper
+  margin: auto
+  text-align: center
+  max-height: 512px
+  margin-bottom: 1em
 
 #action-chooser
   width: 100%

src/app/components/feed/feed.component.ts

@@ -6,6 +6,7 @@ import {DatasharingService} from '../../services/datasharing.service';
 import {ActivityService} from 'src/app/services/activity/activity.service';
 import {User} from 'src/app/models/user';
 import {IErrorResponse} from '../../models/interfaces/IErrorResponse';
+import { BehaviorSubject } from 'rxjs/internal/BehaviorSubject';
 
 @Component({
   selector: 'home-feed',
@@ -15,6 +16,12 @@ import {IErrorResponse} from '../../models/interfaces/IErrorResponse';
 export class FeedComponent implements OnInit {
   loadingNew = true;
   loadingMostLiked = true;
+  // file upload variables
+  public uploading = false;
+  public profilePictureUrl: BehaviorSubject<string | null>;
+  private file;
+  private fileType;
+  public localFileUrl;
 
   checked = false; // if the "I protected the environment."-box is checked
   view = 'new';
@@ -27,7 +34,7 @@ export class FeedComponent implements OnInit {
 
   loggedIn = false;
   user: User;
-  errorOccurred: boolean;
+  errorOccurred = false;
 
   private errorMessage: string;
 
@@ -89,6 +96,22 @@ export class FeedComponent implements OnInit {
     }
   }
 
+  onFileInputChange(event) {
+    this.errorOccurred = false;
+    this.errorMessage = '';
+    this.file = event.target.files[0];
+    if (this.file.type.includes('video')) {
+      this.fileType = 'video';
+    } else if (this.file.type.includes('image')) {
+      this.fileType = 'image';
+    }
+    const reader = new FileReader();
+    reader.onload = (e: any) => {
+      this.localFileUrl = e.target.result;
+    };
+    reader.readAsDataURL(this.file);
+  }
+
   /**
    * Fetches the next posts when scrolled
    */