在探索Angular和Capacitor文件系统时过滤PDF文件

Question

我使用以下代码来探索ionic应用程序中的文件系统，将文件保存到设备中以便上传。

import { Component, ElementRef, ViewChild } from '@angular/core';
import { Filesystem, Directory } from '@capacitor/filesystem';
import write_blob from 'capacitor-blob-writer';
export class QuestionPhotosPage {
@ViewChild('filepicker') uploader: ElementRef;
addFile() { 
this.uploader.nativeElement.click(); 
console.log("click open file explorer");
}
async fileSelected($event) {
console.log("$event", $event)
const selected = $event.target.files[0];
let fileName = this.createFileNameAlt(selected.name)
await write_blob({
directory: Directory.Documents,
path: `${this.FILE_DIR}/${fileName}`,
blob: selected,
fast_mode: true,
recursive: true,
on_fallback(error) { console.error(error) }
})
}

我想知道是否有办法过滤addFile((，只显示文件夹和pdf文档？

Answer 1

使用插件github.com/capawesome-team/capitor-fle-picker，我的代码就是这样的。

import { Filesystem, Directory } from '@capacitor/filesystem';
import write_blob from 'capacitor-blob-writer';
import { File, FilePicker } from '@capawesome/capacitor-file-picker';
async pickFile(): Promise<void> {
const types = ["application/pdf"];
const multiple = false;
const readData = true;
const { files } = await FilePicker.pickFiles({ types, multiple, readData });
this.fileSelected(files);
}

async fileSelected(file: any) {
let fileName = this.createFileNameAlt(file[0].name)
await write_blob({
directory: Directory.Documents,
path: `${this.FILE_DIR}/${fileName}`,
blob: file,
fast_mode: true,
recursive: true,
on_fallback(error) { console.error(error) }
})
}