argos/dmp-frontend/src/app/shared/components/file-uploader/file-uploader.component.ts

import { Component, Input, OnInit } from '@angular/core';
import { FormControl } from '@angular/forms';
import { takeUntil } from 'rxjs/operators';
import { BaseComponent } from '../../../core/common/base/base.component';
import { FileUploader } from '../../../shared/components/file-uploader/FileUploader';

@Component({
	selector: 'app-fileuploader-component',
	templateUrl: './file-uploader.component.html'
})
export class FileUploaderComponent extends BaseComponent implements OnInit {

	files: File | FileList;
	disabled = false;

	fileSelectMultipleMsg = 'No file(s) selected yet.';

	@Input()
	public label = 'FILE-UPLOADER.DEFAULT';

	@Input()
	public fileUploader: FileUploader;

	@Input()
	form: FormControl;

	ngOnInit(): void {
	}

	selectEvent(files: FileList | File): void {
		this.label = 'FILE-UPLOADER.UPLOAD';
		if (files instanceof FileList) {
			const names: string[] = [];
			for (let i = 0; i < files.length; i++) {
				names.push(files[i].name);
			}
			this.fileSelectMultipleMsg = names.join(',');
		} else {
			this.fileSelectMultipleMsg = files.name;
		}
	}

	uploadEvent(files: FileList | File): void {
		const formdata: FormData = new FormData();

		if (files instanceof FileList) {
			for (let i = 0; i < files.length; i++) {
				formdata.append('file', files[i]);
			}
		} else {
			formdata.append('file', files);
		}
		this.fileUploader.uploadFile(formdata)
			.pipe(takeUntil(this._destroyed))
			.subscribe(fileitem => this.form.patchValue(fileitem));
	}

	cancelEvent(): void {
	}
}