Feature: app branding (#5357)

src-ui/src/app/components/common/input/file/file.component.ts

@@ -0,0 +1,53 @@
+import {
+  Component,
+  ElementRef,
+  EventEmitter,
+  Output,
+  ViewChild,
+  forwardRef,
+} from '@angular/core'
+import { NG_VALUE_ACCESSOR } from '@angular/forms'
+import { AbstractInputComponent } from '../abstract-input'
+
+@Component({
+  providers: [
+    {
+      provide: NG_VALUE_ACCESSOR,
+      useExisting: forwardRef(() => FileComponent),
+      multi: true,
+    },
+  ],
+  selector: 'pngx-input-file',
+  templateUrl: './file.component.html',
+  styleUrl: './file.component.scss',
+})
+export class FileComponent extends AbstractInputComponent<string> {
+  @Output()
+  upload = new EventEmitter<File>()
+
+  public file: File
+
+  @ViewChild('fileInput') fileInput: ElementRef
+
+  get filename(): string {
+    return this.value
+      ? this.value.substring(this.value.lastIndexOf('/') + 1)
+      : null
+  }
+
+  onFile(event: Event) {
+    this.file = (event.target as HTMLInputElement).files[0]
+  }
+
+  uploadClicked() {
+    this.upload.emit(this.file)
+    this.clear()
+  }
+
+  clear() {
+    this.file = undefined
+    this.fileInput.nativeElement.value = null
+    this.writeValue(null)
+    this.onChange(null)
+  }
+}