client/src/app/shared/shared-forms/reactive-file.component.ts

   1 import { Component, EventEmitter, forwardRef, Input, OnInit, Output } from '@angular/core'
   2 import { ControlValueAccessor, NG_VALUE_ACCESSOR } from '@angular/forms'
   3 import { Notifier } from '@app/core'
   4 import { GlobalIconName } from '@app/shared/shared-icons'
   5
   6 @Component({
   7   selector: 'my-reactive-file',
   8   styleUrls: [ './reactive-file.component.scss' ],
   9   templateUrl: './reactive-file.component.html',
  10   providers: [
  11     {
  12       provide: NG_VALUE_ACCESSOR,
  13       useExisting: forwardRef(() => ReactiveFileComponent),
  14       multi: true
  15     }
  16   ]
  17 })
  18 export class ReactiveFileComponent implements OnInit, ControlValueAccessor {
  19   @Input() inputLabel: string
  20   @Input() inputName: string
  21   @Input() extensions: string[] = []
  22   @Input() maxFileSize: number
  23   @Input() displayFilename = false
  24   @Input() icon: GlobalIconName
  25
  26   @Output() fileChanged = new EventEmitter<Blob>()
  27
  28   allowedExtensionsMessage = ''
  29   fileInputValue: any
  30
  31   private file: File
  32
  33   constructor (private notifier: Notifier) { }
  34
  35   get filename () {
  36     if (!this.file) return ''
  37
  38     return this.file.name
  39   }
  40
  41   ngOnInit () {
  42     this.allowedExtensionsMessage = this.extensions.join(', ')
  43   }
  44
  45   fileChange (event: any) {
  46     if (event.target.files && event.target.files.length) {
  47       const [ file ] = event.target.files
  48
  49       if (file.size > this.maxFileSize) {
  50         this.notifier.error($localize`This file is too large.`)
  51         return
  52       }
  53
  54       const extension = '.' + file.name.split('.').pop()
  55       if (this.extensions.includes(extension) === false) {
  56         const message = $localize`PeerTube cannot handle this kind of file. Accepted extensions are ${this.allowedExtensionsMessage}}.`
  57         this.notifier.error(message)
  58
  59         return
  60       }
  61
  62       this.file = file
  63
  64       this.propagateChange(this.file)
  65       this.fileChanged.emit(this.file)
  66     }
  67   }
  68
  69   propagateChange = (_: any) => { /* empty */ }
  70
  71   writeValue (file: any) {
  72     this.file = file
  73
  74     if (!this.file) this.fileInputValue = null
  75   }
  76
  77   registerOnChange (fn: (_: any) => void) {
  78     this.propagateChange = fn
  79   }
  80
  81   registerOnTouched () {
  82     // Unused
  83   }
  84 }