web-dev-qa-db-fra.com

Ionic 2 exemples d'utilisation du plugin de fichier

Quelqu'un a-t-il des exemples complets sur la façon d'utiliser le plug-in de fichier natif Cordova dans un projet Ionic 2/Angular 2?

J'ai installé ce plugin mais la documentation ne semble pas avoir beaucoup de sens pour moi car elle est fragmentée et manque d'un exemple complet, y compris toutes les importations nécessaires.

Par exemple, l'exemple suivant ne montre pas d'où proviennent des objets comme LocalFileSystem ou window.

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

Par exemple, je dois créer un fichier de propriétés. Je dois d'abord vérifier si un fichier existe sur la zone de stockage du bac à sable de l'application, s'il n'existe pas, je dois le créer. Ensuite, je dois ouvrir les données d'écriture de fichier et les enregistrer. Comment pourrais-je faire ça?

filetypescriptangularcordova-pluginsionic2
19
Natanael

Ionic 2 est livré avec un wrapper de plugin de fichier Cordova: http://ionicframework.com/docs/v2/native/file/ .

Les chemins d'accès au système de fichiers nécessaires (par exemple cordova.file.applicationDirectory) vous pouvez trouver ici dans la documentation du plugin d'origine: https://github.com/Apache/cordova-plugin-file#where-to-store-files . Notez que toutes les plateformes ne prennent pas en charge les mêmes chemins de stockage.

J'ai même réussi à construire un navigateur de fichiers avec. Utilisez-le comme ceci:

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

Voici un exemple utilisant IonicNative pour une application sur laquelle je travaille où je veux envoyer un e-mail avec une pièce jointe au fichier 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@email',
         attachments: [
           this.file.dataDirectory + 'test.csv'
         ],

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

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

 }
}

Cela a été testé avec ionic 3.7.0 sur IOS.

10
Philip Brack