ionic input file doesn't clear object

Issue

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?

Solution

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;
});

Answered By - sai kiran