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