Filter for PDF files while exploring with Angular and Capacitor Filesystem - angularjs

Question

I use the following code to explore the file system in an ionic App the save files to the device for uploading latter.
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) }
})
}
I was wondering if there is away to filter the addFile() to only show folders and pdf documents?

Answer 1

Using the plugin github.com/capawesome-team/capacitor-file-picker here is what my code looks like.
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) }
})
}