如何强制HTML输入文件选择器在Ionic（Android）中提供原始文件名？ [英] How to force HTML input file chooser to give the original file name in Ionic(Android)?

问题描述

我使用HTML 输入来选择Ionic3 / Angular应用程序中的文件。我使用下面的代码：

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

//在.html文件中

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

//在.ts文件中

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])
      }
    });
  }

这在 iOS 和浏览器。在android和浏览器中，我都可以获得文件的原始名称，大小和类型。但问题出现在 Android 。

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）：当我选择使用图像文件时文件选择器，我可以得到文件的原始文件名，大小和类型。

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）：当我选择图像文件以外的文件，如 .pdf ， .doc 等，我无法获取原始文件名和文件类型。假设我选择了一个文件名 sample.pdf ，但在我选择文件后，我将文件名称作为随机数，如 45675 和 最重要的是文件类型，我得到的是空的 。

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.

然后，我在stackoverflow中研究并看到了这些链接（ <强> LINK1 和 link2 < /强>）。它可能是Android的安全问题。

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

有一个离子原生/文件选择器库但它仅适用于 android平台。

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

是否存在有什么方法可以强制android给出原始文件名？

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

推荐答案

Android没有给出原始文件名和文件类型我的上述方法，这是Android的安全问题。因此，我必须在下面的解决方案中检索正确的文件名，文件类型，文件大小和base64中的文件数据。

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 will need below four plugins:

1. FileChooser


2. 文件


3. FilePath


4. Base64

1. FileChooser
2. File
3. FilePath
4. Base64

FileChooserAndroidProvider：

import {Injectable} from '@angular/core';
import {File, FileEntry, IFile} from "@ionic-native/file";
import {Base64} from "@ionic-native/base64";
import {FilePath} from "@ionic-native/file-path";
import {FileChooser} from "@ionic-native/file-chooser";


@Injectable()
export class FileChooserAndroidProvider {

  constructor(private base64: Base64, private filePath: FilePath, private file: File, private fileChooser: FileChooser) {
  }

  getFileInfo(): Promise<any> {
    return this.fileChooser.open().then((fileURI) => {
      return this.filePath.resolveNativePath(fileURI).then((filePath) => {
        return this.file.resolveLocalFilesystemUrl(filePath).then((fileEntry: FileEntry) => {
          return new Promise((resolve, reject) => {
            fileEntry.file(meta => resolve(meta), error => reject(error));
          });
        }).then((fileMeta: IFile) => {
          return new Promise((resolve, reject) => {
            return this.base64.encodeFile(filePath).then((base64Data) => {
              resolve({
                fileData: base64Data,
                fileName: fileMeta.name,
                fileSize: fileMeta.size,
                fileType: fileMeta.type
              })
            }).catch((error) => {
              reject(error);
            })
          })
        });
      });
    });
  }
}

FileChooserAndroidProviderModule：

import {NgModule} from '@angular/core';
import {Base64} from "@ionic-native/base64";
import {FileChooser} from "@ionic-native/file-chooser";
import {FilePath} from "@ionic-native/file-path";
import {File} from "@ionic-native/file";

@NgModule({
  declarations: [],
  exports: [],
  providers: [
    FileChooser,
    File,
    FilePath,
    Base64
  ]
})
export class FileChooserAndroidProviderModule {
}

SamplePage：

constructor(private fileChooserAndroid: FileChooserAndroidProvider){}

  uploadFileForAndroid(): void {
    this.fileChooserAndroid.getFileInfo().then((result) => {
      this.fileName = result.fileName;
      this.fileData = this.sanitizeFileData(result.fileData);
      this.fileSize = result.fileSize;
      this.fileType = result.fileType;
    }).catch((error) => {
      this.helperProvider.createAlert('Alert', 'File can not be uploaded.');
    });
  }

SamplePageModule：

@NgModule({
  declarations: [
    SamplePage
  ],
  imports: [
    FileChooserAndroidProviderModule
  ],
  providers: [
    FileChooserAndroidProvider
  ]
})
export class SamplePageModule {
}

这篇关于如何强制HTML输入文件选择器在Ionic（Android）中提供原始文件名？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！