Input type=file FileReader onloadend works on browser but not in mobile

I have a simple file input which called selectFiles($event) on change. The files then passed to a FileReader. The exact same code below works well when on a desktop browser through >ionic serve. When debugging with Android Studio on my mobile phones, the reader.onloadend never got executed. Both READ_EXTERNAL_STORAGE and WRITE_EXTERNAL_STORAGE permission is added in the Manifest. Ran out of idea after tried several days.

    selectFiles(event: any): void {
        this.message = [];
        this.progressInfos = [];
        this.selectedFiles = event.target.files;

        if (this.selectedFiles && this.selectedFiles[0]) {
            const numberOfFiles = this.selectedFiles.length;
            if (numberOfFiles > 8){
                alert("Max 8 images");
            }else{
                for (let i = 0; i < numberOfFiles; i++) {
                    var reader = new FileReader();
                    reader.onloadend = (e: any) => {
                        const image = new Image();
                        image.src = e.target.result;
                        image.onload = () => {
                            let index = this.previews.findIndex(preview=>preview.img === '');
                            this.previews[index] = {img:e.target.result, width:image.width, height:image.height, data:this.selectedFiles[i], inProgress: false, progress: 0, id: null};
                            this.fileSelectTrigger.notify(true);
                        };
                    };
                    reader.readAsDataURL(this.selectedFiles[i]);
                }
            }
        }
    }

1 post - 1 participant

Read full topic