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 'ngx-pipes'
7 import { I18n } from '@ngx-translate/i18n-polyfill'
10 selector: 'my-preview-upload',
11 styleUrls: [ './preview-upload.component.scss' ],
12 templateUrl: './preview-upload.component.html',
15 provide: NG_VALUE_ACCESSOR,
16 useExisting: forwardRef(() => PreviewUploadComponent),
21 export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
22 @Input() inputLabel: string
23 @Input() inputName: string
24 @Input() previewWidth: string
25 @Input() previewHeight: string
27 imageSrc: SafeResourceUrl
28 allowedExtensionsMessage = ''
31 private serverConfig: ServerConfig
32 private bytesPipe: BytesPipe
36 private sanitizer: DomSanitizer,
37 private serverService: ServerService,
40 this.bytesPipe = new BytesPipe()
41 this.maxSizeText = this.i18n('max size')
44 get videoImageExtensions () {
45 return this.serverConfig.video.image.extensions
48 get maxVideoImageSize () {
49 return this.serverConfig.video.image.size.max
52 get maxVideoImageSizeInBytes () {
53 return this.bytesPipe.transform(this.maxVideoImageSize)
57 this.serverConfig = this.serverService.getTmpConfig()
58 this.serverService.getConfig()
59 .subscribe(config => this.serverConfig = config)
61 this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
64 onFileChanged (file: Blob) {
67 this.propagateChange(this.file)
71 propagateChange = (_: any) => { /* empty */ }
73 writeValue (file: any) {
78 registerOnChange (fn: (_: any) => void) {
79 this.propagateChange = fn
82 registerOnTouched () {
86 private updatePreview () {
88 const url = URL.createObjectURL(this.file)
89 this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)