Is it possible to upload a JSON file though file upload and read the contents in Angular 6 without talking to an API?

Question

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.

Answer 1

You can try the following:

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

//In your component:
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.