MdbFileUpload - unable to access the reference variable

Topic: MdbFileUpload - unable to access the reference variable

Revature Pro priority asked 3 years ago


    <mdb-file-upload #uploader id="quizCrAddSetFileUpload" (fileRemoved)="onFileRemove()" (fileAdded)="onFileAdd($event)"


import { MdbFileUploadComponent } from 'mdb-file-upload';

 export class QuizCreationComponent implements OnInit {

    @ViewChild('uploader', { static: true }) uploader: MdbFileUploadComponent;
    onFileAdd(file: File) {
        console.log(this.uploader); // undefined

Revature Pro priority answered 3 years ago

We are using v8.0.0 for mdb-file-upload and ng-uikit-pro-standard v8.0.0

Arkadiusz Idzikowski staff commented 3 years ago

Is this full HTML code? The file upload component is not in any container with *ngIf directive?

Does your IDE/editor display any errors about imported MdbFileUploadComponent?

Revature Pro priority commented 3 years ago

1.It is not under *ngIf

2.No errors in IDE when importing.

An alternative solution which we did is:-

this.uploader = new MdbFileUploadComponent();

We kept this code in ngOnInit()

But this.uploader.reset() is not working

Arkadiusz Idzikowski staff commented 3 years ago

Reset method won't work if this.uploader is undefined. Did you manage to get access to the MdbFileUploadComponent class with the new syntax?

Could you try to update the plugin version and/or recreate this issue on new, fresh project and send a demo to It's hard to provide some workaround for this problem because we can't reproduce it on our end. We would like to check if this problem is directly related to our plugin.

Arkadiusz Idzikowski staff answered 3 years ago

As I already mentioned in your other topic - I can't reproduce this problem on my end. Do you use version 8.0.0 or higher?

Please try to change component type from MdbFileUploadComponent to FileUploadComponent

Please insert min. 20 characters.


Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.



Specification of the issue
  • User: Priority
  • Premium support: Yes
  • Technology: MDB Angular
  • MDB Version: 8.0.0
  • Device: all
  • Browser: all
  • OS: all
  • Provided sample code: No
  • Provided link: No