I have a file upload input that accepts mp3 files.Its in the update form of the application, which gets data from backend and populates the form like this:
<div class="row file-upload-row">
<div class="col-md-12">
Log In Greeting File
<input #file accept=".mp3"
formControlName="logInGreetingFile"
type="file"
(change)="uploadFile(file.files)"
/>
</div>
</div>
This is how I m updating the existing data (since I am disabling some controls, I am using rawvalue):
onSubmit(data: AddUserDetails) {
if(this.dialogSubmitTxt =="Update"){
data = this.addUserForm.getRawValue()
this.userService.updateUser(data).subscribe({
next: (res: any) => {
this.toastr.success(res.message, 'User Successfully Updated');
},
error: (err: any) => {
console.log(err);
},
});
}
else{
this.userService.addNewUser(data).subscribe({
next: (res: any) => {
this.toastr.success(res.message, 'User Successfully Added');
},
error: (err: any) => {
console.log(err);
},
});
}
I can see the value is populating for this particular control but its not showing up in place of the file name.Only after I update it shows the file name, but then also the new file name is not being sent to the backend, if it already has some data. But if its previous value is empty , it goes to the backend.
I am getting this error while the form loads:
Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.
Is it possible to show the file name I am getting from backend. Also why is the new name not being sent to the backend.
Edit: I am sending file name from backend , it just isn't showing up in form(although it has filename in its value property). However my bigger concern is that the new file name is not being sent to the backend if it already has some file name when the form loads.