How to read a local file in a PWA with a file chooser?

I’m using Ionic4 for a PWA that is used as backoffice of a system.

I’d like to open a file chooser to open and read a file on the pc of the user.

I know I can’t use Cordova plugins for this purpose, so I think I have to use the File System Access API, is it right?

But if I use this code:

    const fileHandler = await window.showOpenFilePicker();
    const file = await fileHandler.getFile();
    const fileContent = await file.text();

the method “showOpenFilePicker” doesn’t exist on the window object.
How can I open a file and read its content?

Thank you very much


Have u looked at capacitorjs plugins?

The UI for file selection you would have to bring yourself.

Accessing the local filesystem I believe may not be fully supported by all browsers… U would have to google this.

Otherwise, you may want to use input type=file?

Thank you @Tommertom .

I’ve found this way to read the file:

    <div id="import_start">
      <ion-input type="file" accept=".csv, text/plain" (change)="chooseFile($event)"></ion-input>
  async chooseFile(event) {
    this.sourceFile =[0];
    const reader = new FileReader();
    reader.readAsText(this.sourceFile, 'UTF-8');
    reader.addEventListener('load', (event) => {
      const result = reader.result;

However I have to send also the file to the backend so I have found this tutorial that explain how to do the upload:

1 Like