Vue: Vuejs 2 does not model bind file input

[leocflam]

After migration I found this problem.

The data value bind to file input always keep empty string.
After selecting a file, the file path should be in the data but it doesn't. With 2.0.0-rc7 Only Chrome has the issue while ME and Firefox are Okay. With 1.XX all browsers are Okay.

version : 2.0.0-rc.7
http://jsfiddle.net/5sH6A/704/
firefox -->> OK
ME --->> OK
chrome -->> not OK
(chrome version: 53.0.2785.116 m)

1.0.27 was OKAY:
http://jsfiddle.net/mvo6sg72/1/

[posva]

Thanks for filing the issue 😄 . Please follow the Issue Reporting Guidelines and provide a minimal JSFiddle or JSBin containing a set of reproducible steps that can lead to the behaviour you described.

[leocflam]

Hi Posva, I reproduced it. It seems the issue appear with 2.0.0-rc-7 on Chrome only
my chrome version is 53.0.2785.116m and OX is Windows10

[posva]

Thanks! Checking that

[posva]

we're missing the change event for the input[type=file]. Let me add a PR for that

[posva]

@leocflam What's happening here is that input with type=file's value cannot be set with js (for browser security reasons). This means that input is read only, therefore the proper way to handle is using a @change="photo = event.target.value" handler
Here's the right way to handle it: http://jsfiddle.net/posva/32Lvxmmo/

It's worth mentioning in the docs. I'll do that 😄

[posva]

@leocflam This example is better: http://jsfiddle.net/posva/32Lvxmmo/
It uses the FileList which is better than the value

[posva]

FYI I created a PR to add a warning: #3791

[leocflam]

Great! very detailed. Hey, Thanks =)

[j-shelfwood]

Maybe a good idea to add a section in the official documentation about this aswell? I found myself searching quite a while for some more detailed information about the file input. Even though the on change warning is available it feels quite hard to create a responsive form for file uploads in a SPA.