How to force HTML input file chooser to give the original file name in Ionic(Android)?


#1

I am using HTML input for choosing file in my Ionic3/Angular application. I am using below code:

// in .html file

<input #fileUpload type="file" name="myfile"(change)="onFileChoose($event)"/>

// in .ts file

onFileChoose($event): void {
    this.fileChooser.getFileInfo($event).then((result) => {
      this.fileName = result.fileName;
      this.fileData = this.sanitizeFileData(result.fileData);
      this.fileSize = result.fileSize;
      this.fileType = result.fileType;
    }, (error) => {
      this.helperProvider.createAlert('Alert', 'File is corrupted.');
    });
  }

 getFileInfo(event: Event): Promise<any> {

    let target = event && event.target;
    let files: Array<File> = target && target['files'];

    console.log(files[0].type);
    console.log(files[0].name);

    return new Promise((resolve, reject) => {
      if (files && files.length) {
        files = Array.from(files);
        let fileName = files[0].name;
        let fileSize = files[0].size;
        let fileType = files[0].type;
        let fileReader = new FileReader();

        fileReader.onload = () => resolve({
          fileData: fileReader.result,
          fileName: fileName,
          fileSize: fileSize,
          fileType: fileType
        });

        fileReader.onerror = error => reject(error);

        fileReader.onabort = error => reject(error);

        fileReader.readAsDataURL(files[0])
      }
    });
  }

This is working fine in iOS and Browser. Both, in android and browser, i could get the original name, size and type of the file. But the problem occurs in Android.

Scenario-1(Android): When i choose an image file using the file chooser, i could get the original file name, size and type of the file.

Scenario-2(Android): When i choose a file other than image file like .pdf,.doc etc, i could not get the original file name and the type of the file. Suppose, i have choosen a file name “sample.pdf”, but after i chose the file, i get the file name as a random number like 45675 and most importantly the file type, i got is empty.

Then, i researched in stackoverflow and saw these links (link1 and link2). It may be a security issue for android.

There is an ionic-native/file-chooser library but it is only for android platform.

Is there any way to force android to give the original file name?


#2

Android does not give the original file name and file type using the above approach of mine and it is a security issue from android. So, i had to make below solution for retrieving the correct file name, file type, file size and the file data in base64.

You can follow my solution here