Add discard button for selected files

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

@@ -6,12 +6,20 @@
   <div [hidden]="!loggedIn">
     <mat-card>
       <mat-card-content>
-        <div id="inputPreviewWrapper">
+        <div id="inputPreviewWrapper" *ngIf="localFileUrl">
-          <h2 *ngIf="localFileUrl">Preview:</h2>
+          <h2>Preview:</h2>
-          <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
+          <div id="media-box">
-          <video *ngIf="fileType == 'video'"  [src]="localFileUrl" controls="" class="html5-video-player">
+            <button class="discard-button" mat-button mat-icon-button (click)="discardFile()"
-            Your browser does not support playing HTML5 video.
+              matTooltip="discard file"
-          </video>
+              matTooltipShowDelay="200"
+              [disabled]="posting">
+              <mat-icon>close</mat-icon>
+            </button>
+            <img *ngIf="fileType == 'image'" id="inputPreview" [src]="localFileUrl"/>
+            <video *ngIf="fileType == 'video'"  [src]="localFileUrl" id="inputPreview" controls="" class="html5-video-player">
+              Your browser does not support playing HTML5 video.
+            </video>
+          </div>
         </div>
         <mat-form-field class="input">
           <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"

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

@@ -54,6 +54,17 @@
   text-align: center
   max-height: 512px
   margin-bottom: 1em
+  #media-box
+    position: relative
+    width: 100%
+::ng-deep .light-theme .discard-button
+  margin: 0.5em
+  position: absolute
+  background: hsla(255,100%,100%,0.3)
+::ng-deep .dark-theme .discard-button 
+  margin: 0.5em
+  position: absolute
+  background: hsla(0,0%,0%,0.3)
 #progress-bar
   margin-top: 1em
 

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

@@ -1,4 +1,4 @@
-import {Component, OnInit} from '@angular/core';
+import {Component, OnInit, ViewChild} from '@angular/core';
 import {Post} from 'src/app/models/post';
 import {FeedService, Sort} from 'src/app/services/feed/feed.service';
 import {Activitylist} from 'src/app/models/activity';
@@ -17,6 +17,7 @@ export class FeedComponent implements OnInit {
   loadingNew = true;
   loadingMostLiked = true;
   // file upload variables
+  @ViewChild('name', {static: false}) fileInput;
   public uploading = false;
   public profilePictureUrl: BehaviorSubject<string | null>;
   private file;
@@ -109,6 +110,13 @@ export class FeedComponent implements OnInit {
     }
   }
 
+  discardFile() {
+    this.file = null;
+    this.localFileUrl = null;
+    this.fileType = null;
+    this.fileInput.nativeElement.value = '';
+  }
+
   onFileInputChange(event) {
     this.errorOccurred = false;
     this.errorMessage = '';