Unable to generate or compose a text document within my Ionic application

Question

Unable to generate or compose a text document within my Ionic application

After attempting to create a file and write in it, I'm encountering an issue where the file appears to be created but is not visible when navigating to the folder. Can someone please point out what might be going wrong?

Below is my code snippet:

this.file.createFile(this.file.dataDirectory, array.ERROR + '_error', true).then(() => {
                    console.log("Created the file!" + this.file.dataDirectory.toString());
                  }).catch(err => console.log(err));


                  let blob_toSend = new Blob([this.inputxml], { type: 'text/plain' });
                  this.file.writeFile(this.file.dataDirectory, array.ERROR + '_error', blob_toSend, {replace: true, append: false}).then(() => {
                    console.log("Wrote the file!");
                  }).catch(err => console.log(err));

I also attempted to name the file as "_error.txt" but encountered the same issue where it doesn't show up. Any guidance on resolving this problem would be greatly appreciated.

typescript ionic4

Answer 1

Answer №1

Within your typescript file:

export class HomePage {
  fileValue:string;
  constructor(private plt:Platform,private file: File) {}

  checkValueExist(){
    return (this.fileValue);
  }

  createFile(){
    if(this.checkValueExist()){
      this.file.createFile(this.file.dataDirectory,this.fileValue,true).then(xfile=>{
        let filePath = xfile.nativeURL.substr(0, xfile.nativeURL.lastIndexOf('/') + 1);
        if (this.plt.is('android')) {
          this.copyToAppAndroidDir(filePath, xfile.name, this.createFileName(xfile.name));
        }else{
          this.copyToAppIosDir(filePath, xfile.name, this.createFileName(xfile.name));
        }
      }).catch(err=>{
        alert('File Not Created cause of : '+ JSON.stringify(err));
      })
    }else{
      alert('empty text');
    }
  }

  createFileName(name) {
    var newFileName = name + ".txt";
    return newFileName;
  }

  copyToAppAndroidDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, this.file.externalDataDirectory, newFileName).then(success => {
      alert('done');
    }, error => {
      console.log('err :', error);
    });
  }
  copyToAppIosDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
      alert('done');
    }, error => {
      console.log('err :', error);
    });
//here in the this.file.dataDirectory for ios it may work or could be tempDirectory since in reality i have android device and don't know where ios store its files so you can change when testing on ios and know the directory.
  }
}

And within the html:

<ion-input type="text" [(ngModel)]="fileValue"></ion-input>

  <ion-button color="primary" shape="round" expand="block" (click)="createFile()">Create File</ion-button>

Answer 2

Within your typescript file:

export class HomePage {
  fileValue:string;
  constructor(private plt:Platform,private file: File) {}

  checkValueExist(){
    return (this.fileValue);
  }

  createFile(){
    if(this.checkValueExist()){
      this.file.createFile(this.file.dataDirectory,this.fileValue,true).then(xfile=>{
        let filePath = xfile.nativeURL.substr(0, xfile.nativeURL.lastIndexOf('/') + 1);
        if (this.plt.is('android')) {
          this.copyToAppAndroidDir(filePath, xfile.name, this.createFileName(xfile.name));
        }else{
          this.copyToAppIosDir(filePath, xfile.name, this.createFileName(xfile.name));
        }
      }).catch(err=>{
        alert('File Not Created cause of : '+ JSON.stringify(err));
      })
    }else{
      alert('empty text');
    }
  }

  createFileName(name) {
    var newFileName = name + ".txt";
    return newFileName;
  }

  copyToAppAndroidDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, this.file.externalDataDirectory, newFileName).then(success => {
      alert('done');
    }, error => {
      console.log('err :', error);
    });
  }
  copyToAppIosDir(namePath, currentName, newFileName) {
    this.file.copyFile(namePath, currentName, this.file.dataDirectory, newFileName).then(success => {
      alert('done');
    }, error => {
      console.log('err :', error);
    });
//here in the this.file.dataDirectory for ios it may work or could be tempDirectory since in reality i have android device and don't know where ios store its files so you can change when testing on ios and know the directory.
  }
}

And within the html:

<ion-input type="text" [(ngModel)]="fileValue"></ion-input>

  <ion-button color="primary" shape="round" expand="block" (click)="createFile()">Create File</ion-button>

Unable to generate or compose a text document within my Ionic application

Answer №1

Similar questions

Tips for executing forEach on a promise?

How can I retrieve properties from a superclass in Typescript/Phaser?

Using TypeScript to Implement Content Security Policy Nonce

Guide on creating path aliases for Storybook webpack configuration

Unlocking Column Data Tooltips in Angular Datatables: A Step-by-Step Guide

Find all objects in an array that have a date property greater than today's date and return them

Setting a callback function as a prop for react-paginate in TypeScript: A step-by-step guide

Angular - developing a custom web element to enhance the project

Utilizing Express JS to make 2 separate GET requests

What is the best way to define a precise return type for a JSX Element?

What strategies can I implement to streamline the use of these functions instead of creating a separate one for each textfield

Is there a way to load an image onto the ngx-image-cropper without triggering the imageChangedEvent event?

Navigating with Angular 6 using routerlink in a child module with router-outlet specified in the parent component (app.component

What is the best way to transfer a variable between components in Angular without using the HTML page, directly within the components themselves?

Executing a Playwright test against various projects or URLs within a single test run

Error message: The attempted import failed because ' is not exported from the module

Using the watch flag in TypeScript across multiple projects - A comprehensive guide

Instead of leaving an Enum value as undefined, using a NONE value provides a more explicit

Dynamic TypeScript property that can only be assigned values from an array during runtime

Material UI autocomplete is not detecting the options parameter as an array