FileReader takes forever to finish?

Ionic Framework ionic-v3
1

Hi,

I’m trying to upload a file (image) using the formData and http POST starting with a local file URL. At the step that I need to use File Reader in order to convert the local file to st that can be sent to the API end-point, 60% of the times, the FileReader seems to take forever to run and it did not even fail (file size is really small, only around 200 KB), the process just kept running til I had to manually shut the app down. The part that I do not understand is that like I’ve mentioned, this only happened around 6/10 times of trying.

This is the exact process: passing a local file URL to the function avatarProcess() which would return a FileEntry, previously, this FileEntry will be passed to the FileReader before being appened to the form.

The following is the related code piece, any help would be so appriciated:

avatarProcess(path, data) {
    console.log('avatarProcess')   
      if (path.startsWith("file")) {
        console.log('resolveLocalFilesystemUrl')
        this.file.resolveLocalFilesystemUrl(path)
          .then(entry => {
            (entry as FileEntry).file(file => this.readFile(file, data))
          })
          .catch(err => {
            console.log(err);
            this.loading.dismiss()
          }
          );
      }
      else {
        this.file.resolveLocalFilesystemUrl("file://" + path)
          .then(entry => {
            (entry as FileEntry).file(file => this.readFile(file, data))
          })
          .catch(err => {
            console.log(err);
            this.loading.dismiss();
          }
          );
      }
    
  }
  private readFile(file: any, data) {
   
    const reader = new FileReader();
    reader.onload = () => {
      console.log('ok to read file')
      console.log(reader.result)
      const formData = new FormData();
      const imgBlob = new Blob([reader.result], { type: file.type });
      formData.append('file', imgBlob, file.name);
      formData.append('body', data)
      this.postData(formData);
    };
    reader.onerror = () => {
      console.log('fail to read file')
      reader.abort()
      this.loading.dismiss()
    };
    reader.readAsArrayBuffer(file);
  }

My development enviroment info:

Ionic:

ionic (Ionic CLI) : 4.1.0 (C:\Users\HoangN\AppData\Roaming\npm\node_modules\ionic)
Ionic Framework : ionic-angular 3.9.2
@ionic/app-scripts : 3.1.8

Cordova:

cordova (Cordova CLI) : 8.0.0
Cordova Platforms : android 7.0.0, browser 5.0.3
Cordova Plugins : cordova-plugin-ionic-keyboard 2.0.5, cordova-plugin-ionic-webview 1.1.1, (and 13 other plugins)

System:

NodeJS : v8.11.3 (C:\Program Files\nodejs\node.exe)
npm : 5.6.0
OS : Windows 10

2

I assume the you use the Form input type file for choosing the file.

If so the file is in the event.file[0] you can use this in the post function.

I not sure but could it be that Javascript running in the browser don’t have the permission to interact with the file system directly?
Wouldn’t this be a security problem?

3

Thanks so much for your timely response but actually I do not select the file from the file input, I only have the local file url which usually start with “file://…” and like I said, it’s supposed to not work at all or it should work perfectly everytime, now sometimes it does, sometimes it does not which is what’s driving me crazy. :frowning: