Have a downloaded JSON file as a structure. Want to be able to upload it though file upload in Angular (Using Angular 6) and then read the contents of the file directly in Angular, rather than uploading it to an API.

Searching for similar seams to bring back how to read a local file on a server in Angular, rather than through file upload.

Have a downloaded JSON file as a structure. Want to be able to upload it though file upload in Angular (Using Angular 6) and then read the contents of the file directly in Angular, rather than uploading it to an API.

Searching for similar seams to bring back how to read a local file on a server in Angular, rather than through file upload.

• javascript
• angular
• typescript
• angular6

• Are you looking for the File API? I highly remend this guide: html5rocks./en/tutorials/file/dndfiles – Matthew Herbst Commented Dec 7, 2018 at 9:30

1 Answer 1

You can try the following:

//In your Template:
<input type="file" name="files" (change)="uploadFile($event)" />

//In your ponent:
uploadFile(event) {
  if (event.target.files.length !== 1) {
    console.error('No file selected');
  } else {
    const reader = new FileReader();
    reader.onloadend = (e) => {
      // handle data processing
      console.log(reader.result.toString());
    };
    reader.readAsText(event.target.files[0]);
  }
}

I created this demo. Have a look and check if that is what you need.