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 { ServerService } from '@app/core'
   4 import { imageToDataURL } from '@root-helpers/images'
   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: string
  27   allowedExtensionsMessage = ''
  28   maxSizeText: string
  29
  30   private serverConfig: HTMLServerConfig
  31   private bytesPipe: BytesPipe
  32   private file: Blob
  33
  34   constructor (
  35     private serverService: ServerService
  36   ) {
  37     this.bytesPipe = new BytesPipe()
  38     this.maxSizeText = $localize`max size`
  39   }
  40
  41   get videoImageExtensions () {
  42     return this.serverConfig.video.image.extensions
  43   }
  44
  45   get maxVideoImageSize () {
  46     return this.serverConfig.video.image.size.max
  47   }
  48
  49   get maxVideoImageSizeInBytes () {
  50     return this.bytesPipe.transform(this.maxVideoImageSize)
  51   }
  52
  53   ngOnInit () {
  54     this.serverConfig = this.serverService.getHTMLConfig()
  55
  56     this.allowedExtensionsMessage = this.videoImageExtensions.join(', ')
  57   }
  58
  59   onFileChanged (file: Blob) {
  60     this.file = file
  61
  62     this.propagateChange(this.file)
  63     this.updatePreview()
  64   }
  65
  66   propagateChange = (_: any) => { /* empty */ }
  67
  68   writeValue (file: any) {
  69     this.file = file
  70     this.updatePreview()
  71   }
  72
  73   registerOnChange (fn: (_: any) => void) {
  74     this.propagateChange = fn
  75   }
  76
  77   registerOnTouched () {
  78     // Unused
  79   }
  80
  81   private updatePreview () {
  82     if (this.file) {
  83       imageToDataURL(this.file).then(result => this.imageSrc = result)
  84     }
  85   }
  86 }