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