In this tutorial, I am going to explain the Android Internal storage file system and how to get the important directories using Ionic 3 native file plugin.

This tutorial intended to explain the Android file system only. However, you can try the same code on the iOS device on your own to learn about the iOS file system.

Why we need to know the file system?. That's very important question. And the answer is simple. My own File Manager application and know the files available on my Android device. 

I thought to create an own file manager application using the Ionic. To create a file manager app, we need to know the file system. Creating the file manager app is very easy if you know the file system.

If you want to know how to create your own file manager app using Ionic 3, then visit the below link.

https://ampersandacademy.com/tutorials/ionic-framework-3/create-file-manager-mobile-application-using-the-ionic-3-framework

 If you are a windows user, then you know, your files are located in C, D, E etc drives.

C:\
D:\
E:\

If you are Linux/Mac user, then file directory looks like below.

/Applications
/Library
/Users
/usr
/dev
/var
/tmp
/etc

Likewise, the Android internal storage file system looks like below.

file:///android_asset/
file:///data/
file:///storage/emulated/0/


The screenshot of the output using File Plugin.

How to get these file system information using Ionic?. The answer is File plugin.In this tutorial, I am going to guide you, how to get this information using the Ionic 3 in simple steps.

Step1:

Create a new Ionic 3 project using.

ionic start file blank

Step2:

Install the file plugin using the below command.

cd file
ionic cordova plugin add cordova-plugin-file
npm install --save @ionic-native/file

Step3:

Include the file plugin to the app.module.ts file

providers: [File,
StatusBar,
SplashScreen,
{provide: ErrorHandler, useClass: IonicErrorHandler}
]

Step4:

Import the file plugin to the home.ts file

import { File } from '@ionic-native/file';

Step5:

Create a reference object using the constructor in the home.ts.

constructor(public navCtrl: NavController, private fileCtrl: File) { 
}

Step6:

Create variable to store the data.

applicationDirectory='';
applicationStorageDirectory='';
dataDirectory='';
cacheDirectory='';
externalApplicationStorageDirectory='';
externalDataDirectory='';
externalCacheDirectory='';
externalRootDirectory='';
tempDirectory='';
getFreeDiskSpace:any='';

Step7:

Create a function to get file relevant information.

public goToDir()
{
this.applicationDirectory=this.fileCtrl.applicationDirectory;
this.applicationStorageDirectory=this.fileCtrl.applicationStorageDirectory;
this.dataDirectory=this.fileCtrl.dataDirectory;
this.cacheDirectory=this.fileCtrl.cacheDirectory;
this.externalApplicationStorageDirectory=this.fileCtrl.externalApplicationStorageDirectory;
this.externalDataDirectory=this.fileCtrl.externalDataDirectory;
this.externalCacheDirectory=this.fileCtrl.externalCacheDirectory;
this.externalRootDirectory=this.fileCtrl.externalRootDirectory;
this.tempDirectory=this.fileCtrl.tempDirectory;
this.fileCtrl.getFreeDiskSpace().then(data=>{
this.getFreeDiskSpace=data;
})
    
  
}

Step8:

Show the values in the home.html using the below code.

<ion-content padding>
    <h3>File Directory Info</h3>
    <ion-list>
        <ion-item text-wrap>
            <div class="name">applicationDirectory </div>
            <div class="value">{{applicationDirectory}}</div>
        </ion-item>

        <ion-item text-wrap>
            <div class="name">applicationStorageDirectory </div>
            <div class="value">{{applicationStorageDirectory}}</div>
        </ion-item>

        <ion-item text-wrap>
            <div class="name">dataDirectory </div>
            <div class="value">{{dataDirectory}}</div>
        </ion-item>
        <ion-item text-wrap>
            <div class="name">cacheDirectory </div>
            <div class="value">{{cacheDirectory}}</div>
        </ion-item>
        <ion-item text-wrap>
            <div class="name">externalApplicationStorageDirectory </div>
            <div class="value">{{externalApplicationStorageDirectory}}</div>
        </ion-item>
        <ion-item text-wrap>
            <div class="name">externalDataDirectory </div>
            <div class="value">{{externalDataDirectory}}</div>
        </ion-item>
        <ion-item text-wrap>
            <div class="name">externalCacheDirectory </div>
            <div class="value">{{externalCacheDirectory}}</div>
        </ion-item>
        <ion-item text-wrap>
            <div class="name"> externalRootDirectory</div>
            <div class="value">{{externalRootDirectory}}</div>
        </ion-item>
        <ion-item text-wrap>
            <div class="name">tempDirectory </div>
            <div class="value">{{tempDirectory}}</div>
        </ion-item>
        <ion-item text-wrap>
            <div class="name"> getFreeDiskSpace</div>
            <div class="value">{{getFreeDiskSpace}}</div>
        </ion-item>
    </ion-list>

</ion-content>

Step9:

Add the Android platform and run using the below command.

ionic cordova platform add android
ionic cordova run android

That's all. You are done.

Tested Device:
Moto G4 Plus

Summary:

In this tutorial, you have learned how to get the file system information using the Android device. 

Get the full source code using the below link.

https://github.com/bharathirajatut/ionic3/tree/master/AndroidFileDirectoryInfo

Below are the Ionic information used for testing the code.

cli packages: (/usr/local/lib/node_modules)

    @ionic/cli-utils  : 1.19.0
    ionic (Ionic CLI) : 3.19.0

global packages:

    cordova (Cordova CLI) : 7.1.0

local packages:

    @ionic/app-scripts : 3.1.6
    Cordova Platforms  : android 6.3.0
    Ionic Framework    : ionic-angular 3.9.2

System:

    ios-sim : 5.0.13
    Node    : v6.10.0
    npm     : 5.6.0
    OS      : macOS High Sierra
    Xcode   : Xcode 9.1 Build version 9B55