input type="file" — “failed to set the value”

[Artur Paikin]

Trying to use yo-yo with <input type="file"> results in “Uncaught InvalidStateError: Failed to set the 'value' property on 'HTMLInputElement': This input element accepts a filename, which may only be programmatically set to the empty string.” This is a security issue — javascript can’t set values on file inputs, only to an empty string.

var yo = require('yo-yo')

function update () {
  var newEl = render()
  yo.update(el, newEl)
}

function render () {
  return yo`
    <div>
      <input type="file" onchange=${update} />
      <input type="text" onkeydown=${update} />
    </div>
  `
}

var el = render()
document.body.appendChild(el)

Is there something smart we can do about this? I tried not copying value if the input.type = 'file' here or just setting an empty value attribute on element from the beginning. It works, but loses the selected files, which is probably something you can live with, because the file object/path is passed in the event.

Yo Yo example: http://requirebin.com/?gist=4ec0d57791d086b80b10a2fbc1cd87fa
Virtual Dom example: http://requirebin.com/?gist=cb109130d257d059d3e59a695ba6857a

[Yosh]

Yup, can confirm this happens when selecting a file. Reckon not copying the value over would be the right resolution, like you say: it's the event + File object that we care about ✨

[Artur Paikin]

Yeah. Won’t people get confused by file name not appearing on the input though? Should we mention this in the readme?

I also wonder again why virtual-dom doesn’t have this issue. Probably the answer is once again in its name, but shouldn’t it be trying to set the value the same way yo-yo currently does?

[Yosh]

Won’t people get confused by file name not appearing on the input though?

Would it? I've never relied on this; not sure I'm the right person to judge