1 import { Component, forwardRef, Input, OnInit } from '@angular/core'
2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3 import { DomSanitizer, SafeResourceUrl } from '@angular/platform-browser'
4 import { ServerService } from '@app/core'
5 import { ServerConfig } from '@shared/models'
6 import { BytesPipe } from '../shared-main'
9 selector: 'my-preview-upload',
10 styleUrls: [ './preview-upload.component.scss' ],
11 templateUrl: './preview-upload.component.html',
14 provide: NG_VALUE_ACCESSOR,
15 useExisting: forwardRef(() => PreviewUploadComponent),
20 export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
21 @Input() inputLabel: string
22 @Input() inputName: string
23 @Input() previewWidth: string
24 @Input() previewHeight: string
26 imageSrc: SafeResourceUrl
27 allowedExtensionsMessage = ''
30 private serverConfig: ServerConfig
31 private bytesPipe: BytesPipe
35 private sanitizer: DomSanitizer,
36 private serverService: ServerService
38 this.bytesPipe = new BytesPipe()
39 this.maxSizeText = $localize`max size`
42 get videoImageExtensions () {
43 return this.serverConfig.video.image.extensions
46 get maxVideoImageSize () {
47 return this.serverConfig.video.image.size.max
50 get maxVideoImageSizeInBytes () {
51 return this.bytesPipe.transform(this.maxVideoImageSize)
55 this.serverConfig = this.serverService.getTmpConfig()
56 this.serverService.getConfig()
57 .subscribe(config => this.serverConfig = config)
59 this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
62 onFileChanged (file: Blob) {
65 this.propagateChange(this.file)
69 propagateChange = (_: any) => { /* empty */ }
71 writeValue (file: any) {
76 registerOnChange (fn: (_: any) => void) {
77 this.propagateChange = fn
80 registerOnTouched () {
84 private updatePreview () {
86 const url = URL.createObjectURL(this.file)
87 this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)