Ionic native file api : what is the base folder path?

Ionic Native
1

Hello everyone,

In my Ionic2 + Typescript application, I need to read a folder content, starting from the application document folder.
I know that I must import the File class/function from the ‘ionic-native’ module, and that I can use the File.listDir(path, dirName) method, but I don’t know how to get/define the base path.

I would like it to be the corodova.file.documentsDirectory in IOS and cordova.file.dataDirectory on Android, but don’t know how to set it, as typescript says that it cannot find the name cordova (nor device).

Here is my attempt

import {Page, Platform} from 'ionic-angular';
import {File} from 'ionic-native';

interface FileItem {
    name:string;
    isDirectory:boolean;
}

@Page({
  templateUrl: 'build/pages/home/home.html'
})
export class HomePage {
  private files:Array<FileItem> = [];
  private minScreenSize:number;
  private fileTypeIconSize:number;
  private appRootFolder:string;

  constructor(platform:Platform){
      platform.ready().then(() => {
          this.minScreenSize = platform.width() < platform.height() ? platform.width() : platform.height();
          this.fileTypeIconSize = this.minScreenSize * 0.17;

          this.appRootFolder = this.getRootFolder(device.platform);
          File.listDir(this.appRootFolder, "");
      });
  }

  /*
  * General purpose, even if for now only Android and Iphone are supported.
  */
  private getRootFolder(deviceType:string):string {
      let returnValue:string;
      let deviceTypeStr:string = deviceType;

      if (deviceTypeStr.startsWith("BlackBerry")) deviceTypeStr = "BlackBerry";

     switch (deviceTypeStr){
           case "iOS":
               returnValue = cordova.file.documentsDirectory;
               break;
           case "Mac OS X":
               returnValue = cordova.file.applicationStorageDirectory;
               break;
          default:
               returnValue = cordova.file.dataDirectory;
      }

      return returnValue;
  }

}

I get errors (some error not included as they are similar).

TypeScript error: home.ts(23,51): Error TS2304: Cannot find name 'device'.
TypeScript error: home.ts(72,27): Error TS2304: Cannot find name 'cordova'.

My environment

ionic cli: 2.0.0-beta.25
installed the ionic-native plugin
project is defined with Ionic2 and TypeScript

Thanks in advance

2

I got the cordova name and device name to be recognized, by installing “cordova” with typings (version 0.8.1).

$> npm install -g typings@0.8.1
$> typings install cordova --ambient --save
$> typings install cordova/plugins/filesystem
$> typings install cordova/plugins/device
3 Likes
3

it worked fine but I needed to add --ambient --save
$> typings install cordova/plugins/filesystem

4

For others that, like me, have been confused while using the latest version of typings (version 1.3.1) you’d use:

typings install dt~cordova/plugins/filesystem --global --save

dt~ specifies the DefinitelyTyped repository, and as of 1.0 “–ambient” became “–global”.

1 Like
5

after your imports
declare var cordova:any;
when you want to reference a directory
const fs:string = cordova.file.dataDirectory;

1 Like
6

Why “erasing” type checking when they are available with a simple typings install ?

7

I am facing the same issue, after all these change also i could not access “cordova”. I am running the app on simulator. When I use codova app is not loaded. I am using ionic 2.0.0.

8

I was able to fix this issue by installing npm @types packages

npm install @types/cordova --save
npm install @types/cordova-plugin-device --save

Not sure why, but the directory the typings command stores files isn’t used by Ionic. However, tsc will look in ./node_modules/@types/ for typing declarations.

9

How to get selected file size in ionic 2??

10

On Android I simply use file.externalRootDirectory that is /storage/emulated/0 using only the plugin File

import { File } from '@ionic-native/file';
...
constructor (private file: File) { ... }
...
     let filedir = file.externalRootDirectory + 'myDir/'
     let record_file = 'myFile'
     this.file.writeExistingFile(fileDir, record_file, 'text').then(() =>{
         console.log('File wrote')
     }).catch(err => { console.log(err.message) });

But I wonder how to reach the SdCard.

P.

2 Likes
11

use cordova.file.externalDataDirectory that is <sdcard>/Android/data/<app-id>/files to reach to the sd card files and folders.

1 Like
12

Thank u man …
but could u tell me how to open pdf ?
I m trying to open bt it just open and suddenly closed it self .
dont know what happening.