client/src/app/shared/images/image-upload.component.ts

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