Error with setValue on FileInput control

[Amunds]

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();

[Amunds]

I tried adding new FileInput([reader.result]) but got the same error. I've also started getting NaN for actualSize in the validator. However, the validator is no longer throwing TypeError.

I'm now using the readFile function with the same issue. Please correct me if I'm wrong as I'm not proficient enough to debug this myself, but from my understanding FileInput only accepts File and not Blob. So when I overwrite the value of with a blob it causes errors because it can't find fileName and fileSize etc.

So if I want to save a base64 blob to the database I'd instead want to populate a hidden field instead of trying to set the value on the , correct?

[merlosy]

Can you manage to set up a stackblitz demo of your issue.
That would be easier for me to debug your issue.

You can fork this: https://stackblitz.com/edit/ngx-material-file-input

[Amunds]

Here's the stackblitz: https://ngx-material-file-input-v3a7ij.stackblitz.io

[merlosy]

Ok, this seems to be related to template driven forms.
https://stackblitz.com/edit/ngx-material-file-input-v3a7ij

I'll add to my todo list

[peterbsmyth]

@Amunds I used this to get around the same error you had

[merlosy]

closing as of version 0.3.0