Property file does not exist on type 'Advance Component'

Ramco Ramco

In below code i am getting error

uploadImage(event:any){
    debugger;
    const file = event.currentTarget.files[0];
    if(event.target.files.length > 0 ){
      if(file.type == 'image/png' || file.type == 'image/jpeg') {
      const formObj = new FormData();
      formObj.append('file',file);
      this.post('storeapi.gerasim.in/Customer/Upload',formObj).subscribe((res: any)=>{
        this.uploadedFileNames.push(res);
    });
  }
    }
  }

Thanks

3 Replies

Know the answer? Post it — somebody with the same question will find it here.

Jayraj Chhaya2y ago
Hi Ramco,

If you are using Angular 17, then *ngFor directive has been replaced with the @for directive for iterating over arrays.

Angular 17
```
    
```
Ramco Ramco2y ago
Hi Jayraj

If i want to use @for (item of uploadedFileNames) then what i need to change

Thanks
Jayraj Chhaya2y ago
Problem

The code has a bug that causes an error: "Property file does not exist on type 'Advance Component'". This error occurs because the variable file is not declared within the scope of the loop in the image display section.

Reason

The issue arises from attempting to access the file variable within the loop @for (item of uploadedFileNames). The file variable is defined within the uploadImage function but is being referenced outside its scope, leading to a TypeScript compilation error.

Solution

To fix the bug and resolve the TypeScript error, we need to ensure that the file variable is accessible within the loop. One way to achieve this is by modifying the code structure to include the file variable in the loop's scope.
```
    
```
By using the *ngFor directive in Angular templates, we can iterate over the uploadedFileNames array and access the file variable within the loop's scope, resolving the TypeScript error.