How to access to "assets/public/assets" directory with Capacitor Filesystem plugin?

Capacitor
1

Hello guys,

I have a problem with the Filesystem capacitor plugin which tells me that the accessible folder with the variable: “FilesystemDirectory.Documents” does not exist.

I cannot find a solution to access the folder, and the contents of it are needed to continue my development.

Here an example of code :

try {
      const firmwareEntry = await Filesystem.readdir({ directory: FilesystemDirectory.Documents, path: 'assets' });
      this.availableFirmware = firmwareEntry.files;
    } catch (error) {
      throw new FileError(FileErrorEnum.CANT_CHECK_FIRMWARE_DIRECTORY, error);
    }

My ionic-info :

Ionic:

Ionic CLI : 6.13.1
Ionic Framework : @ionic/angular 5.5.4
@angular-devkit/build-angular : 0.1000.8
@angular-devkit/schematics : 10.0.8
@angular/cli : 10.0.8
@ionic/angular-toolkit : 2.3.3

Capacitor:

Capacitor CLI : 2.4.2
@capacitor/core : 2.4.2

Utility:

cordova-res : 0.15.3
native-run : 1.3.0

System:

NodeJS : v14.15.3 (C:\Program Files\nodejs\node.exe)
npm : 6.14.9
OS : Windows 10

Thank you for taking the time to read me :smile:

2

You can’t access the public directory from Filesystem plugin

Documents directory doesn’t belong to your app in Android, it’s a public Documents folder any app or user can access and see

Anything inside the public directory can be accessed by using XHR/fetch (fetch will probably not work on iOS if using absolute urls).

So if you have a json file in public/assets, you can get it like this:

fetch('assets/movies.json')
  .then(response => response.json())
  .then(data => console.log(data));
3 Likes
3

I will try :slight_smile:
Thanks !

4

Hi, Lid3, do you have any solutions on this? I still stuck on getting the image from assets folder.

Below is my code

this.http.get(’/assets/icons/app_logo.png’, { responseType: ‘blob’}).subscribe(res => {

  const reader = new FileReader();
  reader.onloadend = () => {
    this.logoData = reader.result
  }

  reader.readAsDataURL(res);

});

It is working on cordova, but the onloadend function not working on capacitor, please help!:pray:t2:

5

I’m confused as to why you are making this so complicated. Why can’t you just say:

<img src="assets/icons/app_logo.png">

…in the template and be on your merry way?