title: Error: Property 'split' does not exist on type 'string | ArrayBuffer'. Property 'split' does not exist on type 'ArrayBuffer'
body: <p>I'm trying to convert image into Base64 by following a tutorial, when I'm uploading image from angular 6 project. when I press submit button I could able to get the output as value:"base64 code" and also I could able to get the same image by converting the code into image by using a "Convert Your Base64 to Image". 
  But in the code, it shows "Property 'split' does not exist on type 'string | ArrayBuffer'.Property 'split' does not exist on type 'ArrayBuffer'." error by underlining split in red. I tried <a href="https://stackoverflow.com/questions/47813730/error-ts2339-property-split-does-not-exist-on-type-string-string-prope">similar question &amp; answers </a> too. But it was unable to remove the error. </p>
  
  <p>my code is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>import {Component, ElementRef, ViewChild} from '@angular/core';
  import {FormBuilder, FormGroup, Validators} from "@angular/forms";
  
  @Component({
    selector: 'base64-upload',
    templateUrl: './base64-upload.component.html'
  })
  export class Base64UploadComponent {
    form: FormGroup;
    loading: boolean = false;
  
  
    @ViewChild('fileInput') fileInput: ElementRef;
  
    constructor(private fb: FormBuilder) {
      this.createForm();
    }
  
    createForm() {
      this.form = this.fb.group({
        name: ['', Validators.required],
        avatar: null
      });
    }
  
    onFileChange(event) {
      let reader = new FileReader();
      if(event.target.files &amp;&amp; event.target.files.length &gt; 0) {
        let file = event.target.files[0];
        reader.readAsDataURL(file);
        reader.onload = () =&gt; {
          this.form.get('avatar').setValue({
            filename: file.name,
            filetype: file.type,
            value: reader.result.split(',')[1]
          })
        };
      }
    }
  
    onSubmit() {
      const formModel = this.form.value;
      this.loading = true;
      // this.http.post('apiUrl', formModel)
      setTimeout(() =&gt; {
        console.log(formModel);
        alert('done!');
        this.loading = false;
      }, 1000);
    }
  
    clearFile() {
      this.form.get('avatar').setValue(null);
      this.fileInput.nativeElement.value = '';
    }
  
  }</code></pre>
  </div>
  </div>
  </p>
  
  <p>My html code is </p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;form [formGroup]="form" (ngSubmit)="onSubmit()"&gt;
    &lt;div class="form-group"&gt;
      &lt;label for="name"&gt;Name&lt;/label&gt;
      &lt;input type="text" class="form-control" id="name" placeholder="Bob" formControlName="name"&gt;
    &lt;/div&gt;
  
    &lt;div class="form-group"&gt;
      &lt;label for="avatar"&gt;Avatar&lt;/label&gt;
      &lt;input type="file" id="avatar" (change)="onFileChange($event)"  #fileInput&gt;
      &lt;button type="button" class="btn btn-sm btn-default" (click)="clearFile()"&gt;clear file&lt;/button&gt;
    &lt;/div&gt;
  
    &lt;button type="submit" [disabled]="form.invalid || loading" 
                          class="btn btn-success"&gt;Submit &lt;i class="fa fa-spinner fa-spin fa-fw" *ngIf="loading"&gt;&lt;/i&gt;
    &lt;/button&gt;
  
  &lt;/form&gt;</code></pre>
  </div>
  </div>
  </p>