Add discard button for selected files

master
Max 5 years ago
parent 63b2e3cfc2
commit cf8b53bb38

@ -6,12 +6,20 @@
<div [hidden]="!loggedIn"> <div [hidden]="!loggedIn">
<mat-card> <mat-card>
<mat-card-content> <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> </div>
<mat-form-field class="input"> <mat-form-field class="input">
<textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting" <textarea matInput #content type="text" (input)="onTextInputChange()" [(ngModel)]="textInputValue" [disabled]="posting"

@ -54,6 +54,17 @@
text-align: center text-align: center
max-height: 512px max-height: 512px
margin-bottom: 1em 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 #progress-bar
margin-top: 1em margin-top: 1em

@ -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 {Post} from 'src/app/models/post';
import {FeedService, Sort} from 'src/app/services/feed/feed.service'; import {FeedService, Sort} from 'src/app/services/feed/feed.service';
import {Activitylist} from 'src/app/models/activity'; import {Activitylist} from 'src/app/models/activity';
@ -17,6 +17,7 @@ export class FeedComponent implements OnInit {
loadingNew = true; loadingNew = true;
loadingMostLiked = true; loadingMostLiked = true;
// file upload variables // file upload variables
@ViewChild('name', {static: false}) fileInput;
public uploading = false; public uploading = false;
public profilePictureUrl: BehaviorSubject<string | null>; public profilePictureUrl: BehaviorSubject<string | null>;
private file; 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) { onFileInputChange(event) {
this.errorOccurred = false; this.errorOccurred = false;
this.errorMessage = ''; this.errorMessage = '';

Loading…
Cancel
Save