client/src/app/shared/shared-forms/preview-upload.component.ts

   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'
   7
   8 @Component({
   9   selector: 'my-preview-upload',
  10   styleUrls: [ './preview-upload.component.scss' ],
  11   templateUrl: './preview-upload.component.html',
  12   providers: [
  13     {
  14       provide: NG_VALUE_ACCESSOR,
  15       useExisting: forwardRef(() => PreviewUploadComponent),
  16       multi: true
  17     }
  18   ]
  19 })
  20 export class PreviewUploadComponent implements OnInit, ControlValueAccessor {
  21   @Input() inputLabel: string
  22   @Input() inputName: string
  23   @Input() previewWidth: string
  24   @Input() previewHeight: string
  25
  26   imageSrc: SafeResourceUrl
  27   allowedExtensionsMessage = ''
  28   maxSizeText: string
  29
  30   private serverConfig: ServerConfig
  31   private bytesPipe: BytesPipe
  32   private file: Blob
  33
  34   constructor (
  35     private sanitizer: DomSanitizer,
  36     private serverService: ServerService
  37   ) {
  38     this.bytesPipe = new BytesPipe()
  39     this.maxSizeText = $localize`max size`
  40   }
  41
  42   get videoImageExtensions () {
  43     return this.serverConfig.video.image.extensions
  44   }
  45
  46   get maxVideoImageSize () {
  47     return this.serverConfig.video.image.size.max
  48   }
  49
  50   get maxVideoImageSizeInBytes () {
  51     return this.bytesPipe.transform(this.maxVideoImageSize)
  52   }
  53
  54   ngOnInit () {
  55     this.serverConfig = this.serverService.getTmpConfig()
  56     this.serverService.getConfig()
  57       .subscribe(config => this.serverConfig = config)
  58
  59     this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
  60   }
  61
  62   onFileChanged (file: Blob) {
  63     this.file = file
  64
  65     this.propagateChange(this.file)
  66     this.updatePreview()
  67   }
  68
  69   propagateChange = (_: any) => { /* empty */ }
  70
  71   writeValue (file: any) {
  72     this.file = file
  73     this.updatePreview()
  74   }
  75
  76   registerOnChange (fn: (_: any) => void) {
  77     this.propagateChange = fn
  78   }
  79
  80   registerOnTouched () {
  81     // Unused
  82   }
  83
  84   private updatePreview () {
  85     if (this.file) {
  86       const url = URL.createObjectURL(this.file)
  87       this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)
  88     }
  89   }
  90 }