Nrthugu

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.

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.