Tips on resolving the issue of 'ERROR TypeError: Object(…) is not a function' when calling the fileChooser.open() function

I've been working on developing an Ionic application and encountered an issue with sending PDF files to a Laravel API. I decided to implement a file chooser for Ionic, but every time I try to upload the file, I get an error saying "Object(…) is not a function" at FileChooser.open. I've attempted various solutions to fix this problem, but none have worked so far.

Below is my fill.ts code:


import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { ComplaintProvider } from '../../providers/complaint/complaint';
import { FileTransfer, FileTransferObject, FileUploadOptions } from '@ionic-native/file-transfer/ngx';
import { FileChooser } from '@ionic-native/file-chooser/ngx';
import { File } from '@ionic-native/file/ngx';
import { FilePath } from '@ionic-native/file-path/ngx';

@IonicPage()
@Component({
  selector: 'page-fill',
  templateUrl: 'fill.html',
})
export class FillPage {
  // Code goes here...
}

And here's the app.modules.ts:


import { NgModule, ErrorHandler } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { IonicModule, IonicApp, IonicErrorHandler } from 'ionic-angular';
// Other imports...

@NgModule({
  declarations: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage,
    FillPage,
    AddPage
  ],
  imports: [
    BrowserModule,
    IonicModule.forRoot(MyApp),
    IonicStorageModule.forRoot(),
    HttpModule
  ],
  bootstrap: [IonicApp],
  entryComponents: [
    MyApp,
    AboutPage,
    ContactPage,
    HomePage,
    TabsPage,
    LoginPage,
    FillPage,
    AddPage
  ],
  providers: [
    StatusBar,
    SplashScreen,
    AuthProvider,
    FileTransfer,
    FileChooser,
    File,
    FilePath,
    ComplaintProvider,
    {
      provide: ErrorHandler,
      useClass: IonicErrorHandler
    },
  ]
})
export class AppModule {}

Answer №1

Could you attempt modifying the import statement from

import {FileChooser} from '@ionic-native/file-chooser/ngx';

to

import FileChooser from '@ionic-native/file-chooser/ngx';

I encountered a similar problem with another Ionic plugin. It's just a guess.

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips on converting a date string in the format 'dd/MM/yyyy' to a date type using TypeScript

I have attempted the following code in order to convert the date from 'yyyy-mm-dd' format to 'dd/MM/yyyy'. However, when I check the typeof() of the result, it shows that it is a string. Is there a method to convert it into only a date? ...

The Express middleware type cannot be assigned as expected

I'm encountering an error where my first middleware is being red underlined. I can't figure out why it's only happening to the first one. https://i.sstatic.net/PahAz.png https://i.sstatic.net/GgxBy.png Can anyone provide some guidance on ...

Learn the process of uploading files with the combination of Angular 2+, Express, and Node.js

Need help with uploading an image using Angular 4, Node, and Express with the Multer library. Check out my route.js file below: const storage = multer.diskStorage({ destination: function(req, file, cb) { cb(null, 'uploads') }, filename: fun ...

Trustpilot: The function window.Trustpilot.loadFromElement does not exist in Safari

I am looking to integrate 3 TrustPilots into my Angular application. import { Component, Input, OnInit } from '@angular/core'; declare global { interface Window { Trustpilot: any; } } window.Trustpilot = window.Trustpilot || {}; @Component ...

Setting up an Angular proxy for Server prod: A step-by-step guide

Exploring a new approach in my Angular front end app, I aim to conceal the API URL from the browser's network. For example, instead of directly calling api.url.dz/login, I wish to call front.url.dz/login on the front end and then redirect it to api.ur ...

The variable in Angular stopped working after the addition of a dependent component

Currently, I am working with Angular and have implemented two components. The first component is a navigation bar that includes a search bar. To enable the search functionality in my second component (home), I have added the following code: HTML for the n ...

What is the best way to integrate environment-specific configuration options into an AngularJS and Typescript project?

Currently, I am working on a project using AngularJS, Typescript, and VisualStudio. One of the key requirements for this project is to have a configuration file containing constants that control various settings such as REST API URLs and environment names. ...

Difficulty in transitioning observable information between inherited components

Having a base component and two inherited components, each component retrieves data from its own service which is stored in the state. When attempting to use the following approach, the data does not switch correctly: get codeData$(): Observable<Codes.C ...

Change the default parameter value when optional parameters are present

I am working with a function that has four parameters, where the first parameter is mandatory, the second and third are optional, and the fourth has a default value: class MyClass { static myFunc(param1: string, param2? : string, param3? : string, param ...

When using TypeScript types with JSX.Element in React, attempting to use .map() will result in an error message with code TS2339

I have decided to build a calendar using table elements and TypeScript. This is my first experience with TypeScript and I am facing an issue where my type is not being accepted. As you can see in the code snippet below, I am using JSX elements as placehold ...

Discovering the url fragments (anchor parameters) using redirectTo in Angular routing

I am currently exploring Angular routing redirection using router tables and wondering if there is a straightforward way to include URL fragments in the redirect. My code snippet looks like this: { path: ':word', redirectTo: 'blah/:wor ...

The additional parameters I am trying to append are being overwritten by the set parameters in the httpInterceptor

Issue Description: I have implemented an HttpInterceptor that adds an id and token to all requests when the user's credentials are available. However, I am facing the problem of the interceptor overwriting any additional HttpParams added to a request. ...

Angular 6 - Receiving @Input causes output to multiply by 4 instead of displaying just once

In my Angular project, I have two components set up. Here is the code for both: app.component.ts: import { Component } from '@angular/core'; @Component({ selector: 'app-root', templateUrl: './app.component.html', styl ...

Using TypeScript to categorize items based on common characteristics and assigning them a unique group ID

I am looking to create a function that can achieve the following: Accepts an array of products as input Returns a new array of products with a unique groupId attribute for each Products will share the same groupId if they have common attributes specified ...

An exploration of navigating through a generic interface in Angular

I've recently started exploring Angular and I'm trying to incorporate a generic interface to reuse pagination models from different sources. Let me share some code examples to clarify. export interface IUser{ id: string; name: string; email: stri ...

Unit testing Firebase function with Jest for mocking

Currently, I am in the process of developing unit tests and facing challenges with mocking Firebase functions while specifying the return type upon calling them. The code snippet below illustrates what I intend to mock (account.service.ts) and provides ins ...

Using useState, react, and typescript, is there a way to set only the icon that has been clicked to

When I click on the FavoriteIcon inside the ExamplesCard, all the icons turn red instead of just the one that was clicked. My approach involves using useState to toggle the icon state value between true and false, as well as manipulating the style to adjus ...

Experiencing issues with unsubscribing in an Angular application?

Attempting to subscribe for a REST call this.empObs0 = this.fetchData.getEmployeeInfoToUpdate(JSON.parse(this.empName0)).subscribe( data0 => { this.emp_DBRows0 = <EmpUpdateModel[]> data0; }, error => { console.log(error); } ); ...

Having trouble connecting my Node.js server to my Angular application

I encountered an issue while trying to upload an image using Angular and Node.js on the server-side. Unfortunately, when attempting to view the webpage, I am unable to see anything. Here is the browser output: https://i.stack.imgur.com/t9MrF.png Below is ...

Can a universal type be designed for application across various types?

I've got this function: function stackPlayer(stack){ } The stack parameter can have one of the following forms only: a function that takes req, res, and next as arguments. a function that takes req, res, and next as arguments, and returns a functio ...