Alpine: x-model not working on file upload

[mokhosh]

This is not working:

<div x-data="{ fileName: '' }">
  <input type="file" x-model="fileName">
  <span x-text="fileName"></span>
</div>

I have to use something like this instead:

<div x-data="{ fileName: '' }">
    <input type="file" x-ref="file" @change="fileName = $refs.file.value">
    <span x-text="fileName"></span>
</div>

[nandordudas]

One soruce of bad functionalty is the using of FileList. File input has an array of files

[nandordudas]

<div x-data="{ fileName: '' }">
    <input type="file" x-ref="file" @change="fileName = $refs.file.files[0].name">
    <p class="text-red-500" x-text="fileName" />
</div>

If you want to use multiple attribute, then you must use the for directive, because there arr not only one item in the files array

[mokhosh]

Thanks, but $refs.file.value works as well. The problem with x-model is I think the fact that you can get the value but you can't set it programatically. That's why it doesn't work.

[calebporzio]

Interesting, what does Vue do with v-model on a file input? I would say, we just mimick that

[tlgreg]

v-model doesn't seem to have any special behavior for file inputs.
Should we even have one? Do file inputs need two-way data binding? 🤔

[mokhosh]

v-model doesn't seem to have any special behavior for file inputs.
Should we even have one? Do file inputs need two-way data binding? 🤔

It could be useful in two ways:
1) As a shorthand for getting the value which is totally available
2) For resetting the file input, javascript can set the value to an empty string, it just can't set it to a new file address

Interesting, what does Vue do with v-model on a file input? I would say, we just mimick that

I don't think Vue has done a perfect job here. v-model is for getting any value, and setting any value, here is the situation with file inputs:
1) You can get any value
2) You can set the value to an empty string
3) You can't set the value to non-empty strings

I say we keep what we have access to, and just handle the case that causes a fatal error and show a warning in the console saying you can't set the file address on file inputs and give them a link to Mozilla or something.

[SimoTod]

hi @mokhosh
Can you give me more details about the issue?

I had a quick look and it's currently matching VueJS.

When you apply x-model to a input file you can:

• read the value (it will be the path of that file on your disk)
• set the value to '' (to reset the file input)
  You cannot:
• set the value to an arbitrary string since you would get a DOM Exception (Vue and Vanilla JS would get the same exception).

Is it just about capturing the exception on the third case to allow the following directives to update?

[mokhosh]

Yes, tried it and seems like it's been fixed somewhere along the way.
Thanks.

[SimoTod]

Great news. Thanks for checking.