Angular: How to use with file input

[alator21]

Is it possible to integrate with the file input? I tried something like this

 <ng-container
              [tanstackField]="form"
              [name]="getImageContentName($index)"
              #name="field">
              <label
                for="file_input"
                >File Input</label
              >

              <input
                id="file_input"
                type="file"
                placeholder="Type content"
                [name]="name.api.name"
                [value]="name.api.state.value"
                (blur)="name.api.handleBlur()"
                (input)="name.api.handleChange($any($event).target.value)" />
            </ng-container>

But i'm getting the following error on load

ERROR DOMException: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.

When i select a file (a.png) and submit the form, i get this value on my field C:\\fakepath\\a.png

Is it possible to get both the filename and the data(uint8Array or something else)

[crutchcorn]

It should be possible to do a one-way binding from the HTMLInput to TanStack Form, but not the other way around (DOM limitation).

To do this, you'll want to use handleChange($any($event).files) rather than target.value

[alator21]

After some struggle, I think it should be $any($event).target.files . $any($event).files is returning undefined in my case

[GonzaloManoukian]

Im having the same issue and chanching the handleChange is not a solution for me. @alator21 Did you modify anything else besides the handleChange?
Thanks!

[alator21]

Hi @GonzaloManoukian , I just checked that piece of code, and the solution that I posted above was working exactly like this. No other changes that I am aware of.