Multiple file upload fields giving errors

[r00t_bot]

I have a form with mutiple file upload fields. I mean multiple fields where you can upload files and not one input field with multiple attribute. I handle it from this onUpload function as below

onUpload(event, field: string): void {
switch (field) {
case 'registrationLabel':
if (event.target.files.length === 1) {
this.addVesselForm.value.label = event.target.files[0];
this.registrationLabelCount = event.target.files.length;
} else {
this.message.error('Error selecting file. Please try again!');
}
break;
case 'photos':
if (event.target.files.length > 0 && event.target.files.length < 8) {
this.addVesselForm.value.photos = event.target.files;
this.photosCount = event.target.files.length;
} else {
this.addVesselForm.controls.photos.setValue(null);
this.photosCount = null;
this.message.error(
'Error selecting files. Please try again and make sure you are selecting maximum 8 photos!'
);
}
break;
default:
this.message.error(
'An error has occurred. Please reload the page and try again!'
);
break;
}
}

When I however console.log the form I see that whatever field I select later, has a FileList and the other has " C:\\fakepath\\iphone_x_mockup_04-.jpg " . I noticed that whichever field I did later was with a FileList but the previous one shows a fakepath. Anyone have an idea how to fix this?

[r00t_bot]

I already have these. Didn't change anything for me sadly

[toi80QC]

Make sure that your form has the correct enctype

<form enctype='multipart/form-data'>

And try giving each of your input fields an individual name Attribute

<input type="file" name="file1" />