How to read and write from angular app to local file

Question

I am building an Angular 7 web app and I am trying to incorporate functionality for users to complete a survey and submit the results. Until I am able to set up a database to store the info, I was wanting to store the results in a local json file. However, I am having trouble finding a way to append to an existing local file without using Node.js 'fs' module (I have read that this functionality cant be used with Angular 6-7).

Is there no way for me to do this? I know it is not the best way and I plan on incorporating server side and database functionality after I get the app up and running.

why do you need a file though ? You can store the data in localStorage or in indexDb. — k.s.
– k.s., Commented Feb 6, 2019 at 21:33
isnt local storage only used for the user's session? i need it to persist beyond any one user's session — Hugh Zhang
– Hugh Zhang, Commented Feb 6, 2019 at 22:21
it's not for the session, it's there until the user (or you) removes it. — k.s.
– k.s., Commented Feb 6, 2019 at 22:24
Your Angular web app does not run on the server. To save a file on the server, you would need to have a server process of some sort running! — crashmstr
– crashmstr, Commented Feb 7, 2019 at 15:31

Esrath Muqayyar · Accepted Answer · 2019-02-07 08:09:59Z

8

You can make use of fileSaver.

Try the following

npm install file-saver --save

Then add a declarations file to your project like 'declarations.d.ts' and in it put

declare module 'file-saver';

In your systemjs.config.js, add the following to the map section

'file-saver': 'npm:file-saver/FileSaver.js'

And then import the library in your component or service like below

import { Component } from '@angular/core';
import * as saveAs from 'file-saver';


@Component({
  selector: 'my-app',
  template: `<h1>Hello {{name}}</h1>
  <button (click)="SaveDemo()">Save File</button>`,
})
export class AppComponent {
  name = 'Angular';

  SaveDemo() {
    let file = new Blob(['hello world'], { type: 'text/csv;charset=utf-8' });
    saveAs(file, 'helloworld.csv')
  }
}

Hope it helps.

answered Feb 7, 2019 at 8:09

Esrath Muqayyar

1152 silver badges10 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Hugh Zhang Over a year ago

thank you for your idea, however file-saver creates and saves files to the client. I am trying to maintain a file on the server side. However, I am going to try to use your explanation of its installation and apply it to other packages that I had trouble getting to work with angular 7. Will reply back soon!

Pholoso Mams Over a year ago

@HughZhang my understanding is that Angular runs on the client side (browser) which means it can not save a file on the server unless you have a web API that performes that function and your Angular application consuming the API via http client.

abderrahmen · Accepted Answer · 2022-12-13 09:13:46Z

-1

Angular is only for client side. you can't save a file into the server side

answered Dec 13, 2022 at 9:13

abderrahmen

95 bronze badges

1 Comment

Sai Tarun Over a year ago

If you have a new question, please ask it by clicking the Ask Question button. Include a link to this question if it helps provide context. - From Review

Collectives™ on Stack Overflow

How to read and write from angular app to local file

2 Answers 2

2 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related