2016-07-08 111 views
15

Qualcuno ha esempi completi su come utilizzare il plugin di file nativo Cordova in un progetto Ionic 2/Angular 2?Esempi di utilizzo del plug-in di file di Ionic 2

Ho installato questo plug-in, ma la documentazione non sembra avere molto senso per me a causa del fatto che è frammentata e manca di un esempio completo, comprese tutte le importazioni necessarie.

Ad esempio, il seguente esempio non mostra da dove provengono oggetti come LocalFileSystem o finestra.

window.requestFileSystem(LocalFileSystem.PERSISTENT, 0, function (fs) { 

    console.log('file system open: ' + fs.name); 
    fs.root.getFile("newPersistentFile.txt", { create: true, exclusive: false }, function (fileEntry) { 

     console.log("fileEntry is file?" + fileEntry.isFile.toString()); 
     // fileEntry.name == 'someFile.txt' 
     // fileEntry.fullPath == '/someFile.txt' 
     writeFile(fileEntry, null); 

    }, onErrorCreateFile); 

}, onErrorLoadFs); 

Ad esempio, ho bisogno di crare un file di proprietà. Per prima cosa devo controllare se esiste un file nell'area di archiviazione sandbox dell'app, se non esiste devo crearlo. Quindi devo aprire i dati di scrittura del file e salvarlo. Come potrei farlo?

+0

puoi essere più specifico su ciò che stai cercando di realizzare? –

+0

Ad esempio, ho bisogno di crare un file di proprietà. Per prima cosa devo controllare se esiste un file nell'area di archiviazione sandbox dell'app, se non esiste devo crearlo. Quindi devo aprire i dati di scrittura del file e salvarlo. – Natanael

+0

https://forum.ionicframework.com/t/file-datadirectory-static-in-ionic-native-can-not-be-found-by-typescript – andmar8

risposta

13

Ionic 2 viene fornito con un wrapper di file di estensione Cordova: http://ionicframework.com/docs/v2/native/file/.

I percorsi necessari per il file system (ad esempio cordova.file.applicationDirectory) sono disponibili alla documentazione del plug-in originale: https://github.com/apache/cordova-plugin-file#where-to-store-files. Si noti che non tutte le piattaforme supportano gli stessi percorsi di archiviazione.

Sono persino riuscito a creare un browser di file con esso. Usalo in questo modo:

import {Component} from '@angular/core'; 
import {File} from 'ionic-native'; 

... 

File.listDir(cordova.file.applicationDirectory, 'mySubFolder/mySubSubFolder').then(
    (files) => { 
    // do something 
    } 
).catch(
    (err) => { 
    // do something 
    } 
); 
+1

Grazie per la risposta! Questo era uno dei miei dubbi. Da dove viene questo oggetto cordova? – Natanael

+0

Il compilatore ti darà un messaggio ma l'oggetto cordova è disponibile sul tuo dispositivo usando Ionic. – tyftler

+0

Purtroppo ricevo una schermata vuota e un messaggio di errore nella console. Il messaggio dice: Errore TypeScript: E: /Ionic2/ionic2-app/app/providers/file-provider/file-provider.ts (22,18): Errore TS2304: Impossibile trovare il nome 'cordova'. – Natanael

6

Ecco un esempio utilizzando IonicNative per un app sto lavorando su dove voglio inviare una e-mail con un allegato di file CSV.

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

class MyComponent { 
constructor(private emailComposer: EmailComposer, private file: File) { 

} 
testEmail() { 
this.file.writeFile(this.file.dataDirectory, 'test.csv', 'hello,world,', {replace: true}) 
    .then(() => {  
     let email = { 
     to: '[email protected]', 
     attachments: [ 
      this.file.dataDirectory + 'test.csv' 
     ], 

     subject: 'subject', 
     body: 'body text...', 
     isHtml: true 
     }; 
     this.emailComposer.open(email); 

    }) 
    .catch((err) => { 
     console.error(err); 
    }); 

} 
} 

Questo è stato testato con 3.7.0 ionico su IOS.

+0

thx per la condivisione. Cerchi questo !! – TomG