Read a file and parse its content

Question

I have file upload control which holds the selected file as below,

<div class="Block">   <label id="lbl">File </label>   <input #fileInput type='file'/> </div> 

I have a submit button as below,

<button type="button" class="btn btn-primary"       (click)="uploadDocument()">Upload File</button> 

When I select a file and click on the upload button the file I need the contents inside the file without sending it to the server and reading from there.

Note: Type of file will be csv

Answer 1

You can use FileReader in javascript to achieve this as its a csv file

Add a file change event to store the file in a object as below,

<div class="Block">   <label id="lbl">Code </label>   <input type='file' (change)="fileChanged($event)">  </div> 

The function should set the file to an object which is used later

file:any; fileChanged(e) {     this.file = e.target.files[0]; } 

When the submit button is clicked you can use the readAsText() method of FileReader in javascript to get the content as below,

uploadDocument(file) {     let fileReader = new FileReader();     fileReader.onload = (e) => {       console.log(fileReader.result);     }     fileReader.readAsText(this.file); } 

Note: onload event will be fired after the content is read so your logic should be inside the onLoad function.