I am getting an error error NG8002: Can't bind to 'uploader' since it isn't a known property of 'input'. while using the ng2-file-upload module.
the problem is occurring in the photo-editor.component.html I have shared the photo-editor.component.html,photo-editor.component.ts and my app.module.ts below
photo-editor.component.html
<div class="row mt-3">
<div class="col-md-3">
<h3>Add Photos</h3>
<div ng2FileDrop
[ngClass]="{'nv-file-over': hasBaseDropZoneOver}"
(fileOver)="fileOverBase($event)"
[uploader]="uploader"
class="card ng-faded p-3 text-center mb-3 my-drop-zone">
<i class="fa fa-upload fa-3x"></i>
Drop Photos Here
</div>
Multiple
<input type="file" ng2FileSelect [uploader]="uploader" multiple /><br/>
Single
<input type="file" ng2FileSelect [uploader]="uploader" />
</div>
photo-editor.component.ts
import { Component, Input, OnInit } from '@angular/core';
import { FileUploader } from 'ng2-file-upload';
import { take } from 'rxjs';
import { User } from 'src/app/_models/user';
import { Member } from 'src/app/_modules/member';
import { AccountService } from 'src/app/_services/account.service';
import { environment } from 'src/environments/environment';
import { MembersService } from 'src/app/_services/members.service';
import { FileUploadModule } from 'ng2-file-upload';
@Component({
selector: 'app-photo-editor',
templateUrl: './photo-editor.component.html',
styleUrls: ['./photo-editor.component.css']
})
export class PhotoEditorComponent implements OnInit {
@Input() member: Member | undefined;
uploader: FileUploader | undefined;
hasBaseDropZoneOver = false;
baseUrl = environment.apiUrl;
user: User | undefined;
constructor(private accountService: AccountService) {
this.accountService.currentUser$.pipe(take(1)).subscribe({
next: user => {
if (user) this.user = user
}
})
}
ngOnInit(): void {
this.initializeUploader();
}
fileOverBase(e:any){
this.hasBaseDropZoneOver=e;
}
initializeUploader(){
this.uploader = new FileUploader({
url: this.baseUrl + 'users/add-photo',
authToken: 'Bearer ' + this.user?.token,
isHTML5: true,
allowedFileType: ['image'],
removeAfterUpload: true,
autoUpload: false,
maxFileSize: 10 * 1024 * 1024//max allowed bby cloudinary
});
this.uploader.onAfterAddingFile = (file)=>{
file.withCredentials = false;
}
this.uploader.onSuccessItem = (item,response,status,headers)=>{
if (response) {
const photo = JSON.parse(response);
this.member?.photos.push(photo);
}
}
}
}
app.module.ts
...
import { FileUploadModule } from 'ng2-file-upload';
...
@NgModule({
declarations: [...],
imports: [...
FormsModule,
SharedModule,
FileUploadModule,],
providers:[...]
})
export class AppModule { }
I am using angular 14 and for some reasons i cant update my angular version, so I need to work around this only. The error might be related to ng2-file-upload module but i cant seem to find it.