Ionic : undefined is not a constructor FileReader

user_7583291 0
Viewed 1664

I have a problem when I create a FileReader (from @ionic-native/file) instance :

let f = new FileReader();

The following error occur :

TypeError: undefined is not a constructor (evaluating 'new __WEBPACK_IMPORTED_MODULE_2__ionic_native_file__["FileReader"]()')

I dont understand why !

My config is :

  • nodejs v8.9.1
  • npm : v5.5.&
  • ionic : 3.9.3
  • angular : v5.0.1
  • iOS emulator

For more informations I use this code :

private readFile(file: any) {
     const reader = new FileReader();
     reader.onloadend = () => {
        const formData = new FormData();
        const imgBlob = new Blob([reader.result], {type: file.type});
        formData.append('file', imgBlob, file.name);
        this.postData(formData);
    };
    reader.readAsArrayBuffer(file);
 }

An error occurs on new FileReader()

Thanks.

cordova-plugins ionic-framework angular
2 Answers

The Cordova polyfill saves the original FileReader in FileReader._realReader You can reassign it by doing:

let fr= new FileReader(); 
let rfr = fr._realReader;

FileReader = rfr.constructor;
user_16068110

I not resolved my FileReader problem, but I used an other solution :

public constructor(private fileTransfer: FileTransfer) {
}


public uploadImage(url: string, imageUri: string, fileName: string): Promise<boolean> {
    return new Promise<boolean>((resolve, reject) => {
        const options: FileUploadOptions = {
            fileKey: 'file',
            fileName: fileName,
            httpMethod: 'POST'
        };

        const fileTransfer: FileTransferObject = this.fileTransfer.create();
        fileTransfer.upload(imageUri, url, options)
            .then(fileUploadResult => {
                console.log('saveImage', fileUploadResult.response);
                resolve(fileUploadResult.responseCode == 201);
            })
            .catch(error => {
                console.error('saveImage', error.code);
                reject(error);
            });
    });
}

The imageUri come form :

addPicture() {
    const options: CameraOptions = {
        quality: 100,
        sourceType: PictureSourceType.PHOTOLIBRARY,
        destinationType: this.camera.DestinationType.FILE_URI,
        encodingType: this.camera.EncodingType.JPEG,
        mediaType: this.camera.MediaType.PICTURE
    };

    this.camera.getPicture(options)
        .then(imageUri => {
            console.log(imageUri);
            this.selectedPictureUriToSend = imageUri;
            this.selectedPictureUri = normalizeURL(imageUri);
        })
        .catch(error => {
            console.error(error);
        });
}

I call the previews functions :

public async publish() {
    try {
        if (this.selectedPictureUriToSend) {
            let fileName = this.selectedPictureUriToSend.substr(this.selectedPictureUriToSend.lastIndexOf('/') + 1);
            this.uploadImage('http://localhost:8181/mythreadsproject/api/image', this.selectedPictureUriToSend, fileName)
            .then(response => {
                console.log(response);
            })
            .catch(error => {
                console.error(error);
            });
        }
    } catch (error) {
        console.error(error);
    }
}
user_75832910
Related