Using button for input file in Vuejs issue

Question

I am trying to use a button for the input file to trigger. But the issue I am facing here is whenever I click on the button it takes me to http://localhost:3000/availability?vue-file-input= url instead of opening the file selector. Please help me find where I am going wrong.

<div class="vue-file-wrapper">
 <button class="vue-button" @click="document.getElementById('fileInput').click()">Choose&nbsp;File
 </button>
 <div>{{ filename }}</div>
 <input
   type="file"
   ref="file"
   style="display:none"
   name="vue-file-input"
   id="fileInput"
   :disabled="user.availability"
   @change="onFileSelected"
 >
</div>

please check this answer

Boussadjra Brahim
– Boussadjra Brahim

2020-07-29 15:56:38 +00:00
Commented Jul 29, 2020 at 15:56 — Boussadjra Brahim
– Boussadjra Brahim, Commented Jul 29, 2020 at 15:56

Hammed Oyedele · Accepted Answer · 2020-07-29 16:07:04Z

6

Use Vue Refs instead of querying the DOM, this should work just fine:

<div class="vue-file-wrapper">
  <button class="vue-button" @click.prevent="$refs.file.click()">Choose&nbsp;File
  </button>
  <div>{{ filename }}</div>
  <input
    type="file"
    ref="file"
    style="display:none"
    name="vue-file-input"
    id="fileInput"
    :disabled="user.availability"
    @change="onFileSelected"
  />
</div>

This is the jsfiddle showing that it works: https://jsfiddle.net/Lgc5rnzs

edited Jul 29, 2020 at 16:07

answered Jul 29, 2020 at 15:48

Hammed Oyedele

1,2609 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

6 Comments

ehhc Over a year ago

Or don't use a button at all... See e.g. bulma.io/documentation/form/file which demonstrate, that you can wrapp a input type file in a "button" that still uses the default html5 input mechanism.. :)

user12763413 Over a year ago

I have tried what you suggest above. It is still the same issue. I need to use button due to styling in our platform.

Hammed Oyedele Over a year ago

@user12763413 have you tried my answer? it should work fine.

ehhc Over a year ago

@hammed-oyedele here is a jsfiddle with your answer, showing that it works: jsfiddle.net/sLmoyjv7

user12763413 Over a year ago

Yes i did try your answer it is the same issue. Whatever I try inside name="vue-file-input" it take me to that url. in case I type name="file-input" then it take me to localhost:3000/availability?file-input=

|

Collectives™ on Stack Overflow

Using button for input file in Vuejs issue

1 Answer 1

6 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

6 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related