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 { HTMLServerConfig } 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: HTMLServerConfig
  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.getHTMLConfig()
  56
  57     this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
  58   }
  59
  60   onFileChanged (file: Blob) {
  61     this.file = file
  62
  63     this.propagateChange(this.file)
  64     this.updatePreview()
  65   }
  66
  67   propagateChange = (_: any) => { /* empty */ }
  68
  69   writeValue (file: any) {
  70     this.file = file
  71     this.updatePreview()
  72   }
  73
  74   registerOnChange (fn: (_: any) => void) {
  75     this.propagateChange = fn
  76   }
  77
  78   registerOnTouched () {
  79     // Unused
  80   }
  81
  82   private updatePreview () {
  83     if (this.file) {
  84       const url = URL.createObjectURL(this.file)
  85       this.imageSrc = this.sanitizer.bypassSecurityTrustResourceUrl(url)
  86     }
  87   }
  88 }