ui-document-picker returns file path that can't be used to open a file

On both iOS and Android I cannot open the file using the path returned by openFilePicker. For example, using {N} 8.1.5:

ns create test-app
> Angular
> Hello World
ns plugin add @nativescript-community/ui-document-picker

Then edit src/app/item/item-detail.component.html to open a filePicker:

...
<Label class="h2" [text]="item.name" (tap)="handleTap()"></Label>
...

And add the corresponding handler to src/app/item/item-detail.component.ts:

...
  handleTap(): void {
    openFilePicker().then((val) => {
      if (!val.files || val.files.length === 0) {
        throw new Error('No file selected.');
      } else {
        const path = val.files[0];
        console.log(`Path: ${path}`);
        const file = File.fromPath(path);
        console.log(`File: ${file.name}`);
      }
    });
  }
...

Then:

ns build android
ns run android

And test on the device.

Expected result: File name is printed to the console

Actual result: ERROR Error: Uncaught (in promise): Error: java.io.IOException: No such file or directory

Here is a more detailed stack trace:

JS: ERROR Error: Uncaught (in promise): Error: java.io.IOException: No such file or directory
JS: ensureFile(file: src\webpack:\test-app\node_modules\@nativescript\core\file-system\file-system-access.android.js:388:0)
JS:     at getFile(file: src\webpack:\test-app\node_modules\@nativescript\core\file-system\file-system-access.android.js:41:0)
JS:     at fromPath(file: src\webpack:\test-app\node_modules\@nativescript\core\file-system\index.js:136:0)
JS:     at (file: src\webpack:\test-app\src\app\item\item-detail.component.ts:26:29)
JS:     at invoke(file: src\webpack:\test-app\node_modules\zone.js\fesm2015\zone.js:372:0)
JS:     at onInvoke(file: src\webpack:\test-app\node_modules\@angular\core\fesm2015\core.mjs:25457:0)
JS:     at invoke(file: src\webpack:\test-app\node_modules\zone.js\fesm2015\zone.js:371:0)
JS:     at run(file: src\webpack:\test-app\node_modules\zone.js\fesm2015\zone.js:134:0)
JS:     at (file: src\webpack:\test-app\node_modules\zone.js\fesm2015\zone.js:1276:0)
JS:     at invokeTask(file: src\webpack:\test-app\node_modules\zone.js\fesm2015\zone.js:406:0)
JS:     at onInvokeTask(file: src\webpack:\test-app\node_modules\@angular\core\fesm2015\core.mjs:25444:0)
JS:     at invokeTas...

The path returned on Android is, "content://com.android.providers.media.documents/document/image%3A122" and on iOS is "file:///private/var/mobile/Containers/Shared/AppGroup/1EA300C8-AE93-45E0-BE2F-4CF58C832464/File%20Provider%20Storage/Downloads/some-file.hex"

Reproduce the issue from src/app/item/item-detail.component.html and src/app/item/item-detail.component.ts using the NativeScript build and run commands shown. Compare the Android content URI and iOS file URI returned by openFilePicker with File.fromPath behavior; done means the selected file can be opened and its name is printed on both platforms.