"FileReader is not a constructor"

[SvenSchoene]

I'm submitting a ... (check one with "x") [ x ] bug report [ ] feature request [ ] support request => Please do not submit support requests here, use one of these channels: https://forum.ionicframework.com/ or https://ionicworldwide.herokuapp.com/

Current behavior: I try to initiate a new FileReader-object with new FileReader(). I get this error:

Uncaught TypeError: _ionic_native_file_ngx__WEBPACK_IMPORTED_MODULE_2__.FileReader is not a constructor (cordova.js:311)
    at add-media.component.ts:56
    at win (FileEntry.js:85)
    at Object.callbackFromNative (cordova.js:291)
    at <anonymous>:1:13

Expected behavior: Initiate a new FileReader-object without issue.

Steps to reproduce: Here's some sample code:

import { Component, OnInit } from '@angular/core';
import { BaseComponent } from '../../base-component';
import { Entry, FileReader, FileEntry, File, IFile, FileError } from '@ionic-native/file/ngx';
import { FormGroup, FormBuilder, Validators } from '@angular/forms';

@Component({
  selector: 'app-add-media',
  templateUrl: './add-media.component.html',
  styleUrls: ['./add-media.component.scss']
})
export class AddMediaComponent extends BaseComponent implements OnInit {
  public file: Entry = null

  public form: FormGroup;

  constructor(
      ...
  ) {
    super()

    // Prints '-- FileReader #1:  undefined'
    console.log("-- FileReader #1: ", FileReader)

    // Prints '-- File #1:  ƒ File() { ...'
    console.log("-- File #1: ", File)
  }

  ngOnInit() {}

  upload() {
    let file = this.file

    // Prints '-- FileReader #2:  undefined'
    console.log("-- FileReader #2: ", FileReader)

    file.filesystem.root.getFile(file.fullPath, {}, (fileEntry: FileEntry) => {
      // Prints '-- FileReader #3:  undefined'
      console.log("-- FileReader #3: ", FileReader)
      fileEntry.file((ifile: IFile) => {

        // Prints '-- FileReader #4:  undefined'
        console.log("-- FileReader #4: ", FileReader)

        let reader = new FileReader() // <-- crashes here
        reader.onloadend = function() {
          ...
        }
        reader.readAsArrayBuffer(ifile)
      }, (err: FileError) => { console.log("fileEntry.file error: ", err) })
    }, (err: FileError) => { console.log("getFile error: ", err)})
  }
}

Other information: I am running this on the Android Emulator, API 27, both with and without live-reload.

It might also be useful to know that window.FileReader returns the correct object from here: https://github.com/apache/cordova-plugin-file/blob/master/www/FileReader.js Which is weird and I don't understand why exactly that is. But it at least shows that the file is correctly compiled/bundled into the build.

Ionic info: (run ionic info from a terminal/cmd prompt and paste output below):

>ionic info
√ Gathering environment info - done!

Ionic:

   ionic (Ionic CLI)          : 4.1.1 (C:\Users\...\AppData\Roaming\npm\node_modules\ionic)
   Ionic Framework            : @ionic/angular 4.0.0-beta.12
   @angular-devkit/core       : 0.7.5
   @angular-devkit/schematics : 0.7.5
   @angular/cli               : 6.1.5
   @ionic/ng-toolkit          : 1.0.8
   @ionic/schematics-angular  : 1.0.6

Cordova:

   cordova (Cordova CLI) : 8.0.0
   Cordova Platforms     : android 7.0.0, android-old 7.0.0
   Cordova Plugins       : cordova-plugin-ionic-keyboard 2.1.3, cordova-plugin-ionic-webview 2.1.4, (and 6 other plugins)

System:

   Android SDK Tools : 26.1.1 (E:\DEV\Android\SDK)
   NodeJS            : v9.5.0 (E:\DEV\nodejs_active\node.exe)
   npm               : 6.3.0
   OS                : Windows 10

[anxinghuang]

I have a same issue on ionic4-beta version, has someone to solve it ?

[CasperAlant]

Remove the FileReader import:

import { Entry, FileEntry, File, IFile, FileError } from '@ionic-native/file/ngx';

This results in using the actual FileReader class from cordova-plugin-file.

[santiagovasquez]

import { File, FileReader } from "@ionic-native/file"; ---> remove FileReader

var lReader = new FileReader(); ---> Call without imports

[github-actions[bot]]

There has been no recent activity and this issue has been marked inactive.