ionic input file doesn't clear object - image

Question

in my ionic app, I have in home.html file
:
<input type="file" (change)="onFileChange($event)" multiple />
and in .ts file
onFileChange(fileChangeEvent) {
this.file = fileChangeEvent.target.files[0];
if (typeof fileChangeEvent.target.files[1] !== 'undefined') {
this.file_2 = fileChangeEvent.target.files[1];
}
if (typeof fileChangeEvent.target.files[2] !== 'undefined') {
this.file_3 = fileChangeEvent.target.files[2];
}}async submitForm() {
let formData = new FormData();
formData.append("photo", this.file, this.file.name);
if (typeof this.file_2 !== 'undefined') {
formData.append("photo_2", this.file_2, this.file_2.name);
}
if (typeof this.file_3 !== 'undefined') {
formData.append("photo_3", this.file_3, this.file_3.name);
}
formData.append("nome_mercatino", this.nome_mercatino);
this.http.post("https://myserver/myphpfile.php", formData).subscribe((response) => {
console.log(response);
});
}`
to send from 1 to 3 image to server. When I send first time files, there is no problem, but, if I retry, changing for example, from 2 files, to only 1 file, when I send to server my file, also the second one from the previous sending, is re-sent. Why? How can I clear file object to send always the correct files?

Answer 1

i got the answer set all three files to undefined when you done.You are setting file_2 but in if condition it is failing and file_2 is not changing i think you got it?
onFileChange(fileChangeEvent) {
this.file = fileChangeEvent.target.files[0];
if (typeof fileChangeEvent.target.files[1] !== 'undefined') {
this.file_2 = fileChangeEvent.target.files[1];
}
if (typeof fileChangeEvent.target.files[2] !== 'undefined') {
this.file_3 = fileChangeEvent.target.files[2];
}}async submitForm() {
let formData = new FormData();
formData.append("photo", this.file, this.file.name);
if (typeof this.file_2 !== 'undefined') {
formData.append("photo_2", this.file_2, this.file_2.name);
}
if (typeof this.file_3 !== 'undefined') {
formData.append("photo_3", this.file_3, this.file_3.name);
}
formData.append("nome_mercatino", this.nome_mercatino);
this.http.post("https://myserver/myphpfile.php", formData).subscribe((response) => {
console.log(response);
this.file_1=undefined;
this.file_2=undefined;
this.file_3=undefined;
});