How to use FileSaver in angular 5 correctly?

Question

I'm trying to save file to file system using file upload functionality. Since the file is require for the angular app and not for the backend (rest api - java), I decided to save it in the frontend app which means somewhere inside the assets folder in angular app.

I've install angular-file-saver.

Template code:

<input type="file" name="file-7[]" id="file-7" class="inputfile inputfile-6" (change)="handleFileInput($event.target.files)">

component code:

import { FileSaver }  from 'angular-file-saver';

handleFileInput(files: FileList) {
    this.imageUpload = files.item(0);
    this.imageFileName = this.logoToUpload.name;
    // how to use FileSaver here ? 
    //this.imageUpload doesn't have data or something like this 

  }

Any idea how to actually save the file in a folder ? thanks.

Mauricio Gracia Gutierrez · Accepted Answer · 2021-07-12 01:31:01Z

5

To trigger the broswer saveAs using angular start by installing these packages

npm install file-saver @types/file-saver ngx-filesaver --save

Add the FileSaverModule module to your project：

import { FileSaverModule } from 'ngx-filesaver';
@NgModule({
  imports: [ FileSaverModule ]
})

Then in your component/service

//if you have issues with this line you might need to stop ng serve and relaunch it
import { FileSaverService } from 'ngx-filesaver'; 

browserSaveAs(blob: any, filename:string) {
    try {
      this.fileSaverService.save(blob, filename);
    }
    catch (e)
    {
      console.log(e) ;
    }
}

The blob can be text content, image, etc.

edited Jul 12, 2021 at 1:31

answered Jul 12, 2021 at 1:25

Mauricio Gracia Gutierrez

11k7 gold badges81 silver badges115 bronze badges

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

Comments

Barr J · Accepted Answer · 2018-11-11 07:05:05Z

4

The simple syntax is:

  vm.download = function(text) {
    var data = new Blob([text], { type: 'text/plain;charset=utf-8' });
    FileSaver.saveAs(data, 'text.txt');
  };
}

notice the FileSaver.saveAs() method, which accepts Blob as parameter.

In your case it might look like:

handleFileInput(files: FileList) {
    this.imageUpload = files.item(0);
    this.imageFileName = this.logoToUpload.name;
    // how to use FileSaver here ? 
    var data = new Blob([imageUpload], { //your file type here });
    FileSaver.saveAs(data, this.imageFileName);  
  }

Note, you might as well need to convert the image to 64 bit and back again from 64 bit in order to save and display it

full example can be found at anguler-file-saver npm page.

answered Nov 11, 2018 at 7:05

Barr J

11k2 gold badges31 silver badges49 bronze badges

20 Comments

user2304483 Over a year ago

The page is not loading when using the code: FileSaver.saveAs(data, this.imageFileName) I've installed FileSaver using "npm install angular-file-saver" but something is wrong here

user184994 Over a year ago

Looks like that's an AngularJS library, not Angular

user2304483 Over a year ago

So, should I uninstall it and install something else ?

user184994 Over a year ago

Yep,there's a package called ngx-filesaver that should work for Angular npmjs.com/package/ngx-filesaver

user2304483 Over a year ago

I need implement POST request then

|

Or Zohar · Accepted Answer · 2019-07-29 11:45:40Z

4

for encoding in a different language create blob like this:

var blob = new Blob(["\ufeff"+csvArray], { type: 'text/csv;charset=utf-8' })

answered Jul 29, 2019 at 11:45

Or Zohar

615 bronze badges

Collectives™ on Stack Overflow

How to use FileSaver in angular 5 correctly?

3 Answers 3

Comments

20 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

20 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related