Filter for PDF files while exploring with Angular and Capacitor Filesystem

Thomas Degroot 0
Viewed 20

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?

angularjs capacitor ionic-framework
1 Answers

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) }
  })
}
Thomas Degroot0
Related