Clash Royale CLAN TAG#URR8PPP

Why can't I trigger input file through prop?

I'm trying to open a selection of files, but through passing prop to component (I need this for convenience). Is there a way to do this?

https://codepen.io/iliyazelenko/pen/RBejRV?editors=1010

Variant in code below does not suit me:

<input type="file" ref="input" hidden>

<button @click="() => $refs.input.click() ">Choose file</button>


Why does it click but does not open file selection?

this.$refs.input.addEventListener('click', e =>
console.log('clicked: ', e.target)
)


1 Answer
1

It will not work if it's not triggered from inside the click event.

What you can do is create a method inside your child component that can be called from the parent component within the event listener callback.

const compo = Vue.component("compo",
template: '<input type="file" ref="input" hidden>',
mounted()
this.$refs.input.addEventListener('click', e =>
console.log('clicked: ', e.target)
)
,
methods:
open()
this.$refs.input.click()


)

new Vue(
el: '#app',
components:
compo
,
data()
return
propForComponent: false
;
,
methods:
onClick()
this.$refs.compo.open()


)

<compo ref="compo"></compo>

<button @click="onClick">Choose file</button>

See this updated pen: https://codepen.io/WisdomSky/pen/GBYyGL?editors=1010

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.