File input with ng-model in nested components throws InvalidStateError

Question

I have a ngform which includes a separate component to upload files. When I try to input a file in this component, the browser throws this error:

I don't understand where this might come from, here is my parent html:

<form
  novalidate
  #logosForm="ngForm"
  (ngSubmit)="brandingService.setLogos(logosForm.value)">
    <div class="columns">
      <div class="column">
        <app-file-upload
          title="Logo principal"
          name="logo"
          label="Logo.png">
        </app-file-upload>
      </div>
    </div>

Here is my child nested html (app-file-upload):

 <div class="upload">
  <span class="upload__label" [translate]="title"></span>
  <div class="file is-fullwidth">
    <label class="file-label">
      <input
      class="file-input"
      type="file"
      accept=".png, .jpg, .ico"
      [name]="name"
      (change)='handleFileInput($event)'
      [(ngModel)]="file">
      <span class="file-cta">
        <span class="file-icon">
          <i class="fas fa-upload"></i>
        </span>
      </span>
      <span class="file-name">
        {{label}}
      </span>
    </label>
  </div>
  <figure *ngIf="file" class="image previsualisation" [ngClass]="{'is-128x128': name == 'logo', 'is-48x48': name == 'favicon'}">
      <img [src]="file">
  </figure>
</div>

And here's the child's ts:

  export class FileUploadComponent {
  file: string | ArrayBuffer;
  @Input()
  title: string;
  @Input()
  name: string;
  @Input()
  label: string;

  constructor() { }

  handleFileInput(event: Event): void {
    const userFile: File = (<HTMLInputElement> event.target).files[0];
    if (userFile) {
      this.label = userFile.name;
      const reader: FileReader = new FileReader();
      reader.onload = ((e: Event): void => {
        const filereader: FileReader = <FileReader> e.target;
        this.file = filereader.result;
      });
      reader.readAsDataURL((<HTMLInputElement> event.target).files[0]);
    }
  }
}

As I understand the error this might come from the fact that I try to bind on a file object (or string | ArrayBuffer) and so I try to change the value of this object and that is forbidden. I don't see how I could use the ngModel differently to get the child component to output the file uploaded by the user. If you have an idea, please help me, thanks !

Answer 1

I suggest you to follow this link. use this way to upload a file by avoid duplicate files, maximum size.

/* Add application styles & imports to this file! */
@import url('https://unpkg.com/bootstrap@3.3.7/dist/css/bootstrap.min.css')

<div>
	<label class="btn btn-primary">
    Upload Documents <input type="file" #fileUpload (change)="fileChangeEvent($event)" onclick="this.value=null" multiple hidden style="display:none;">
  </label>
</div>
<ul>
  <li *ngFor="let fileName of selectedFileNames">{{fileName}} <button (click)="removeFile (fileName)" style="cursor: pointer;"><i class="fa fa-times"></i></button>
  </li>
</ul>

//Typescript Code: For Typescript code refer to

Working Demo

Answer 2

While I don't immediately see an error in your code, file input fields in combination with NgModel show some very strange behaviours.

Ben Nadel recently wrote an article about how to properly access the file inputs value attribute using a ControlValueAccessor, perhaps you can adopt his method instead.