Upload JSON file using Angular 6

Question

I'm trying to load a JSON file from the user using this method:

<input
  style="display: none"
  type="file" (change)="onFileChanged($event)"
  #fileInput>
<button (click)="fileInput.click()">Select File</button>
<button (click)="onUpload()">Upload!</button>

and this is the code in the component ts file:

export class MyFileUploadComponent {
  selectedFile: File

  onFileChanged(event) {
    this.selectedFile = event.target.files[0];
    console.log(this.selectedFile);
    console.log('content: ' + JSON.stringify(this.selectedFile));
  }

  onUpload() {
  // upload code goes here
  }
}

the line console.log(this.selectedFile); does provide me with the file meta data which is:

lastModified: 1551625969247
lastModifiedDate: Sun Mar 03 2019 17:12:49 GMT+0200 (Israel Standard Time) {}
name: "manuscripts.json"
size: 6008
type: "application/json"
webkitRelativePath: ""
__proto__: File

But when I'm trying to print it's content using JSON.stringify I get: {} (empty file).

What's the cause?

Thanks.

Vadim · Accepted Answer · 2019-03-03 17:22:55Z

23

But when I'm trying to print it's content using JSON.stringify I get: {} (empty file).

This is not a content of JSON file. It's a File object. To read content of JSON you need to use FileReader

onFileChanged(event) {
  this.selectedFile = event.target.files[0];
  const fileReader = new FileReader();
  fileReader.readAsText(this.selectedFile, "UTF-8");
  fileReader.onload = () => {
   console.log(JSON.parse(fileReader.result));
  }
  fileReader.onerror = (error) => {
    console.log(error);
  }
}

edited Mar 3, 2019 at 17:22

answered Mar 3, 2019 at 17:07

Vadim

3,4492 gold badges16 silver badges30 bronze badges

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

1 Comment

C0mpl3x Over a year ago

How do i format the text after? I get the json in the console correctly but when i want to print it out in html its not formated correctlly

Daniel Prosianikov · Accepted Answer · 2019-03-03 17:06:58Z

0

JSON.Stringify does not work for File objects in TS/JS. You should extract data from File and then stringify it. For examlple, extract file content as a string or array of strings using https://developer.mozilla.org/en-US/docs/Web/API/FileReader

answered Mar 3, 2019 at 17:06

Daniel Prosianikov

1181 gold badge1 silver badge10 bronze badges

Collectives™ on Stack Overflow

Upload JSON file using Angular 6

2 Answers 2

1 Comment

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related