Ngx Quill image handler embed file cannot read undefined

I am trying to upload an image with ngx quill upload, but I'm getting an error

Here is my code (I followed the documentation https://www.npmjs.com/package/ngx-quill-upload)

Quill.register('modules/imageHandler', ImageHandler);
Quill.register('modules/videoHandler', VideoHandler);

@Component({
  selector: 'app-new-message-dialog',
  templateUrl: './new-message-dialog.component.html',
  styleUrls: ['./new-message-dialog.component.scss'],
  encapsulation: ViewEncapsulation.None
})
export class NewMessageDialogComponent implements OnInit, OnDestroy {
  
  public modules = {
    toolbar: [
      ['link', 'image']
    ],
    imageHandler: {
      upload: (file) => {
        return // your uploaded image URL as Promise<string>
      },
      accepts: ['png', 'jpg', 'jpeg', 'jfif']
    } as Options
  };

  constructor(
    private http: HttpService) {
  }

  ngOnInit(): void {
    this.initializeData();
  }

  public upload(file: any): Promise<any> {
    return new Promise((resolve, reject) => {

    if (file.type === 'image/jpeg' || file.type === 'image/png' || file.type === 'image/jpg') {
      if (file.size < 1000000) { 
        return this.http.uploadFile(file).toPromise()
          .then((response: any) => {
              resolve(response.imgURL);
          })
          .catch((error: any) => {
            reject('Upload failed'); 
            console.error('Error:', error);
          });
        } else {
          reject('Size too large');
        }
      } else {
        reject('Unsupported type');
      }
    });
  }