In this tutorial, I am going to explain you, how to create a file manager mobile application using the Ionic 3 Framework.

Creating a file manager application is very easy. To create file manager app, you need to understand the file system of the OS(Mobile Operating System). In this tutorial, I am going to demonstrate the Android File manager.

Preview of the File Manager Application:

To know more about Android File system, visit the below link.

 

Enough talk. Let's do the coding.

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.

private dirs:any;

Step7:

Create a function to get the files and folder information.

public goToDir()
  {
   
    this.fileCtrl.listDir(this.fileCtrl.externalRootDirectory,'').then(
      (list) => {

          this.dirs=list;
      }
  );

  
  }

The file class had a  listDir() function, which returns all the file and the directory in the particular directory. 

The this.fileCtrl.externalRootDirectory returns local storage root directory.

The file and folder lists are assigned to the dirs variable.

Step8:

Show the file and folders in the home.html using the below code.

<ion-content padding>


    <ion-list>
        <ion-item *ngFor="let x of dirs" (click)="open(x)">
            <ion-icon name='folder' class="file-color" item-start *ngIf="x.isDirectory"></ion-icon>
            {{x.name}}
        </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.


APK Tested Device:

Moto G4 Plus

Summary:

In this tutorial, you have learned how to create your own file manager application using the Ionic 3 and tested with the Android device. You can extend this app with further navigation of the directory. Download the source code and develop further navigation and listing of the directory with the click or tap event. I leaving this option to you.

This code works for the internal storage only. I have not tested it with external storage. Soon I try to write a post on how to access the SD card using the Ionic Framework. However, most of the code remains same for the external storage too. That's all.

Get full source code using.

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


Below is the Ionic 3 information while testing the file manager app 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