1 import { Component, forwardRef, Input, OnInit } from '@angular/core'
2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
3 import { ServerService } from '@app/core'
4 import { imageToDataURL } from '@root-helpers/images'
5 import { HTMLServerConfig } 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
27 allowedExtensionsMessage = ''
30 private serverConfig: HTMLServerConfig
31 private bytesPipe: BytesPipe
35 private serverService: ServerService
37 this.bytesPipe = new BytesPipe()
38 this.maxSizeText = $localize`max size`
41 get videoImageExtensions () {
42 return this.serverConfig.video.image.extensions
45 get maxVideoImageSize () {
46 return this.serverConfig.video.image.size.max
49 get maxVideoImageSizeInBytes () {
50 return this.bytesPipe.transform(this.maxVideoImageSize)
53 getReactiveFileButtonTooltip () {
54 return $localize`(extensions: ${this.videoImageExtensions}, ${this.maxSizeText}\: ${this.maxVideoImageSizeInBytes})`
58 this.serverConfig = this.serverService.getHTMLConfig()
60 this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
63 onFileChanged (file: Blob) {
66 this.propagateChange(this.file)
70 propagateChange = (_: any) => { /* empty */ }
72 writeValue (file: any) {
77 registerOnChange (fn: (_: any) => void) {
78 this.propagateChange = fn
81 registerOnTouched () {
85 private updatePreview () {
87 imageToDataURL(this.file).then(result => this.imageSrc = result)