Getting ERROR TypeError: Cannot read property 'length' error

Question

I am getting the error:

ERROR TypeError: Cannot read property 'length' of undefined at eval (webpack-internal:///./node_modules/@angular/common/esm5/http.js:163) at Array.forEach () at HttpHeaders.lazyInit (webpack-internal:///./node_modules/@angular/common/esm5/http.js:157) at HttpHeaders.init (webpack-internal:///./node_modules/@angular/common/esm5/http.js:305) at HttpHeaders.forEach (webpack-internal:///./node_modules/@angular/common/esm5/http.js:408) at Observable.eval [as _subscribe] (webpack-internal:///./node_modules/@angular/common/esm5/http.js:2210) at Observable._trySubscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:177) at Observable.subscribe (webpack-internal:///./node_modules/rxjs/_esm5/Observable.js:165) at subscribeToResult (webpack-internal:///./node_modules/rxjs/_esm5/util/subscribeToResult.js:32) at MergeMapSubscriber._innerSub (webpack-internal:///./node_modules/rxjs/_esm5/operators/mergeMap.js:143)

It happens when I try to upload a file and I don't understand why since I'm not using the length() function anywhere.

This is my html:

<app-supervisor-header></app-supervisor-header>
<main>
  <div class="container">
      <div class="col-sm">
        <h3>Wijzigen van examen: {{examen.naam}}</h3>
        <form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">
          <div class="row">
            <div class="col-3">
              <label for="vak">Naam</label>
            </div>
            <div class="col-5">
              <div class="form-group">
                <input class="form-control" type="text" id="vak" placeholder="{{examen.naam}}" />
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-3">
              <label for="vak">Bestand</label>
            </div>
            <div class="col-5">
              <div class="form-group">
                <input type="file" name="examen_bestand" class="form-control-file" id="exampleInputFile" aria-describedby="fileHelp" (change)="fileChanged($event)">
                <small id="fileHelp" class="form-text text-muted">Hier kun je de huidige examenskelet vervangen.</small>
              </div>
            </div>
          </div>
          <div class="row">
            <div class="col-8">
              <input type="submit" class="pxl-knop float-right" id="zoek-knop" value="Zoek" />
            </div>
          </div>
        </form>
      </div>
  </div>
</main>

And this the Component:

export class SupervisorExamenAanpassenComponent implements OnInit {
  @Input() examen: Examen = new Examen(null, '', '', null);
  id: number;

  constructor(private serv: ExamService, private route: ActivatedRoute) { }

  onSubmit(form) {
    this.serv.updateExamById(this.id, this.examen).subscribe();
  }

  fileChanged(e) {
    const reader = new FileReader();
    reader.onload = () => {
      this.examen.file = reader.result;
    };
    reader.readAsText(e.target.files[0]);
  }

  ngOnInit() {
    this.route.params.subscribe(params => this.id = params.id);
    this.serv.getExamById(this.id).subscribe((data) => this.examen = data);
  }

}

On the second time I try to submit it also tells me the error is from the HTML line 6 which is:

<form #examUpdateForm="ngForm" (ngSubmit)="onSubmit(examUpdateForm)">

EDIT:

ExamService:

@Injectable()
export class ExamService {
  examens: Examen[] = [];

  constructor(private http: HttpClient) {}

  getExams(): Observable<Examen[]> {
    return this.http.get<Examen[]>(APIURL + '/all');
  }

  getExamById(id): Observable<Examen> {
    return this.http.get<Examen>(APIURL + '/asobject/' + id);
  }

  updateExamById(id, exam: Examen) {
    const fd = new FormData();
    const options = {} as any;
    fd.append('file', exam.file);
    fd.append('name', exam.naam);
    return this.http.put<Examen>(APIURL + '/update/' + id, fd, {headers: {'Content-Type': undefined}});
  }
}

mounds mounds · Accepted Answer · 2018-05-23T01:35:32

Remove this parameter from the http.put call in the ExamService:

{headers: {'Content-Type': undefined}}

You won't need to set Content-Type since, per our discussion below, these will be set correctly for you by angular's HttpClient api.

Also, don't use FileReader to convert the file's Blob content to plain text. Instead just store a reference to the File and on submit append the File and its Name to the FormData. E.g.

// Component
private file: File = null;

fileChanged(e) {
    this.file = e.target.files[0]);
}

onSubmit(form) {
  this.serv.updateExamById(this.id, this.file).subscribe();
}

// Service
updateExamById(id, file: File) {
  const fd = new FormData();   
  fd.append('file', file, file.name);
  return this.http.put<Examen>(APIURL + '/update/' + id, fd);
}

Getting ERROR TypeError: Cannot read property 'length' error

1 Answers