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'
8 selector: 'my-preview-upload',
9 styleUrls: [ './preview-upload.component.scss' ],
10 templateUrl: './preview-upload.component.html',
13 provide: NG_VALUE_ACCESSOR,
14 useExisting: forwardRef(() => PreviewUploadComponent),
19 export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
20 @Input() inputLabel: string
21 @Input() inputName: string
22 @Input() previewWidth: string
23 @Input() previewHeight: string
25 imageSrc: SafeResourceUrl
26 allowedExtensionsMessage = ''
28 private serverConfig: ServerConfig
32 private sanitizer: DomSanitizer,
33 private serverService: ServerService
36 get videoImageExtensions () {
37 return this.serverConfig.video.image.extensions
40 get maxVideoImageSize () {
41 return this.serverConfig.video.image.size.max
45 this.serverConfig = this.serverService.getTmpConfig()
46 this.serverService.getConfig()
47 .subscribe(config => this.serverConfig = config)
49 this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
52 onFileChanged (file: Blob) {
55 this.propagateChange(this.file)
59 propagateChange = (_: any) => { /* empty */ }
61 writeValue (file: any) {
66 registerOnChange (fn: (_: any) => void) {
67 this.propagateChange = fn
70 registerOnTouched () {
74 private updatePreview () {
76 const url = URL.createObjectURL(this.file)
77 this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)