ng2-file-upload (Can't bind to 'uploader') Angular 14

37 views Asked by At

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.

0

There are 0 answers