Read text file using FileReader in (Angular)TypeScript

Question

Trying to read simple text files but it does not seem to read it. When I select an image it works but when I select a text file or word doc it tells me: sanitizing unsafe URL value

This is the code I'm using:

onFilePicked(event: Event) {
    const filePicked = (event.target as HTMLInputElement).files[0];
    this.form.patchValue({ file: filePicked });
    this.form.get('file').updateValueAndValidity();
    const reader = new FileReader();
    reader.onload = () => {
      this.filePreview = reader.result;
    };
    reader.readAsDataURL(filePicked);
  }

This is the HTML code

<div>
     <button class="btn btn-outline-info btn-sm" type="button" 
     (click)="filePicker.click()">Pick File</button>
     <input type="file" #filePicker (change)="onFilePicked($event)">
     </div>

     <div class="file-preview" *ngIf="filePreview !== '' && filePreview && 
     form.get('file').valid">
      <img [src]="filePreview" [alt]="form.value.title">
</div>

Does anyone spot the error, I have been reading other posts but they use jQuery. Any ideas to solve this error are welcome, thanks!

If you have nothing to contribute apart from negativity, why contribute at all? I'm sorry that I'm not as intellectual as you. @JonasLochmann — Andrew
– Andrew, Commented Jun 26, 2018 at 14:21
Thank you for your help, that seemed to do the trick plus changing it to, reader.readAsText(filePicked); from readAsUrl. I'm only new to all this and I'm trying to learn daily, will be careful next time with tags. @JonasLochmann — Andrew
– Andrew, Commented Jun 26, 2018 at 14:38

Andrew · Accepted Answer · 2018-06-26 19:03:16Z

1

For word documents or text instead of having reader.readAsUrl(filePicked); Changed to reader.readAsText(filePicked);. Also when displaying the information a small mistake was having the <img> tag instead of a normal div tag.

answered Jun 26, 2018 at 19:03

Andrew

7152 gold badges9 silver badges26 bronze badges

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

Collectives™ on Stack Overflow

Read text file using FileReader in (Angular)TypeScript

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related