file explorer in ionic 3

1

Hi, I'm trying to make a file explorer for android on ionic 3 by following a tutorial ( link ) and it does not work for me. Use ionic v3.20.0 cordova v8.0.0 npm v5.6.0 node v8.11.1

I install the cordova plugin

ionic cordova plugin add cordova-plugin-file

No error. Install:

npm install --save @ionic-native/file

This gives a problem with a dependency (I do not know if it has something to do):

PS D:\Trabajo\Ionic\Proyecto\myApp> npm install --save @ionic-native/file
npm WARN optional SKIPPING OPTIONAL DEPENDENCY: [email protected] (node_modules\fsevents):
npm WARN notsup SKIPPING OPTIONAL DEPENDENCY: Unsupported platform for [email protected]: wanted {"os":"darwin","arch":"any"} (current: {"os":"win32","arch":"x64"})

+ @ionic-native/[email protected]
updated 1 package in 9.61s

In app.modules.ts I add the File plugin

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

This is prueba.ts

import { Component } from '@angular/core';
import { IonicPage, NavController, NavParams } from 'ionic-angular';
import { File } from '@ionic-native/file';

/**
 * Generated class for the PruebaPage page.
 *
 * See https://ionicframework.com/docs/components/#navigation for more info on
 * Ionic pages and navigation.
 */

@IonicPage()
@Component({
  selector: 'page-prueba',
  templateUrl: 'prueba.html',
})
export class PruebaPage {

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

  constructor(public navCtrl: NavController, public navParams: NavParams, private fileCtrl: File) {
    this.goToDir();
  } 

  ionViewDidLoad() {
    console.log('ionViewDidLoad PruebaPage');
  }

  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;
    })


}


}

This is test.html

<!--
  Generated template for the PruebaPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar>
    <ion-title>Directorio</ion-title>
  </ion-navbar>

</ion-header>


<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>

This is what the browser shows when you insert the command ionic serve:

    
asked by Felix A Marrero Pentón 10.05.2018 в 19:42
source

0 answers