File Input Issues

ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
 at EmulatedEncapsulationDomRenderer2.webpackJsonp.../../../platform-browser/esm5/platform-browser.js.DefaultDomRenderer2.setProperty (http://localhost:3000/vendor.bundle.js:110315:18)
 at DebugRenderer2.webpackJsonp.../../../core/esm5/core.js.DebugRenderer2.setProperty (http://localhost:3000/vendor.bundle.js:94084:23)
 at DefaultValueAccessor.webpackJsonp.../../../forms/esm5/forms.js.DefaultValueAccessor.writeValue (http://localhost:3000/vendor.bundle.js:96517:24)
 at http://localhost:3000/vendor.bundle.js:97945:29
 at http://localhost:3000/vendor.bundle.js:99524:65
 at Array.forEach (<anonymous>)
 at FormControl.webpackJsonp.../../../forms/esm5/forms.js.FormControl.setValue (http://localhost:3000/vendor.bundle.js:99524:28)
 at ToolinputComponent.webpackJsonp.../../../../../src/app/toolinput/toolinput.component.ts.ToolinputComponent.onFileChange (http://localhost:3000/main.bundle.js:2715:52)
 at ToolinputComponent.webpackJsonp.../../../../../src/app/toolinput/toolinput.component.ts.ToolinputComponent.onUploadOutput (http://localhost:3000/main.bundle.js:2458:14)
 at Object.eval [as handleEvent] (ng:///AppModule/ToolinputComponent.ngfactory.js:39:31)

<div class="btn btn btn-unique waves-light">
 <span>Choose file</span>
 <input type="file" class="form-control" id= "filedetails" formControlName = "filedetails" mdbFileSelect (uploadOutput)="onUploadOutput($event)"/>
 </div>
 <div class="file-path-wrapper">
 <input class="file-path" id="filewrapper" type="text" placeholder="Upload your File" [value]="showFiles()">
 </div>


toolinput.component.ts
//using reactive form formControl, I do not have a form control for the filewrapper, is that a possible problem?
tool1inputform = new FormGroup({
 filedetails : new FormControl()
 });

//showfiles()
showFiles() {
 let files = '';
 for (let i = 0; i < this.files.length; i ++) {
 files += this.files[i].name;
 if (!(this.files.length - 1 === i)) {
 files += ', ';
 }
 }
 return files;
 }

//onUploadOutput, also calling this.onFileChange(event); from here.

onUploadOutput(output: UploadOutput): void {

if (output.type === 'allAddedToQueue') {
} else if (output.type === 'addedToQueue') {
this.files.push(output.file); // add file to array when added
} else if (output.type === 'uploading') {
// update current data in files array for uploading file
const index = this.files.findIndex(file => file.id === output.file.id);
this.files[index] = output.file;
} else if (output.type === 'removed') {
// remove file from array when removed
this.files = this.files.filter((file: UploadFile) => file !== output.file);
} else if (output.type === 'dragOver') {
this.dragOver = true;
} else if (output.type === 'dragOut') {
} else if (output.type === 'drop') {
this.dragOver = false;
}
this.showFiles();
this.onFileChange(event);
}

//onFileChange(event)

onFileChange(event) {

if (event.target.files && event.target.files.length > 0) {
const file = event.target.files[0];
this.tool1inputform.get('filedetails').setValue(file);
}
}

//When the submit file button is clicked below is what I do before posting the file to the server

onSubmit(){

const body = this.prepareSave();

//call upload using fileservice.

this.fileService.uploadtool1(body, this.token).subscribe(res =>{
if(res.success){
//do something
}else{

//handle error

}

}

private prepareSave(): any {
let input = new FormData();
input.append('filedetails', this.tool1inputform.get('filedetails').value);

return input;
}


Everything works except for the DOM Exception error in Chrome Console and the No File Chosen toast. Let me know what the issue is.

Thanks.

Aakash.