Error with setValue on FileInput control

I’m doing a onChange: <ngx-mat-file-input (change)="onFileChange(formDoc.value)">

  onFileChange(event) {
    let reader = new FileReader();
    let file = event.requiredfile.files[0];
    reader.onload = () => {
      if(reader.result) {
        this.formDoc.get('photo').setValue(reader.result);
      }
    };
    reader.readAsDataURL(file);
  }

This results in the following error in console:

FileInputComponent.html:1 ERROR TypeError: this._files.map is not a function
    at new FileInput (file-input.model.ts:8)
    at FileInputComponent.get [as value] (file-input.component.ts:41)
    at FileInputComponent.get [as fileNames] (file-input.component.ts:172)
    at Object.eval [as updateRenderer] (FileInputComponent.html:2)
    at Object.debugUpdateRenderer [as updateRenderer] (core.js:10782)
    at checkAndUpdateView (core.js:10158)
    at callViewAction (core.js:10394)
    at execComponentViewsAction (core.js:10336)
    at checkAndUpdateView (core.js:10159)
    at callViewAction (core.js:10394)

The error happens as soon as onFileChange is called and continues forever as long as you’re on the page.

There is also an error with the validator:

ERROR TypeError: Cannot read property 'map' of undefined at file-validator.ts:15 at forms.js:461 at Array.map (<anonymous>) at _executeValidators (forms.js:461) at forms.js:434 at forms.js:461 at Array.map (<anonymous>) at _executeValidators (forms.js:461) at FormControl.validator (forms.js:434) at FormControl.push.../../node_modules/@angular/forms/fesm5/forms.js.AbstractControl._runValidator (forms.js:2228)

The code does what it’s supposed to do though, so it’s not breaking anything as far as I can tell. Tested with the demo app and the same happens there.

[merlosy]

Hi Amunds, Form the docs, the value of the field should be a FileModel object. Implementation here: https://github.com/merlosy/ngx-material-file-input/blob/master/libs/material-file-input/src/lib/model/file-input.model.ts

You should try:

this.formDoc.get('photo').patchValue( new FileInput([reader.result]) );

Let me know if this solves your issue.

Bonus tip: you can try using fromEvent() observable to read data from you File/Blob (not tested)

readFile(file: File | Blob): Observable<any> {
    const reader = new FileReader();
    loadend = fromEvent(reader, 'loadend').pipe(
        map((read: any) => {
            return read.target.result;
        })
    );
    reader.readAsDataURL(file);
    return loadend;
}

// then

readFile(file).subscribe();

[merlosy]

closing as of version 0.3.0