Two equal file inputs sometimes throw TS2345: Argument of type ‘FileList | null’ is not assignable to parameter of type ‘File[]’ and sometimes work

  angular, html, typescript

I’m working my way into Angular. I am building a CSV file reader, to compare two kinds of csv data files. For this I have two component with almost identical setup, only the data is processed differently. Therefore part of both components are identical. It worked fine yesterday, but today after installing lodash-es ng serve came up with compile errors.

It pointed to both file inputs

     <input type="file" name="input1" class="form-control"
           #upload1 (change)="onChange1(upload1.files)" multiple
          value="process1" />


     <input type="file" name="input2" class="form-control"
           #upload2 (change)="onChange2(upload2.files)" multiple
          value="process2" />

the start of both (change) functions is the same:

  onChangeX(files: File[]): void {
    if (files[0]) {
       Do stuff here

Atfer commenting out both inputs it compiles fine and I can use ng serve to test the page. Atfer commentingin both inputs ONE is throwing the error, the other input works fine. Now I can reproduce the TS2345: Argument of type 'FileList | null' is not assignable to parameter of type 'File[]'. Type 'null' is not assignable to type 'File[]'. by commenting in and out the input I commented in last.
When quitting the ng serve and restarting it, it will again start by throwing the error on both inputs. Again, commenting out both with show the website, if I comment both back in again, now in different order the one that worked beforehand will now throw the error and the other one will now work fine.

Can anyone please explain what is happening and how to fix this problem? I tried copying the code back again, renaming functions, it always goes "Both throw error" -> One worksm one doesn’t.

Thanks in advance

Source: Angular Questions

Leave a Reply

This site uses Akismet to reduce spam. Learn how your comment data is processed.