Vuejs input file form

Question

In my vue-bootstrap application I would like to use hidden input file control. When I use the standard input component it works (Load 1). If i try to do the same with the reactive component form vue-bootstrap library it does not work (Load 2). I would appreciate any hints what I might be doing wrong.

app = new Vue({
  el: "#app",
  data: {
    files: '',
  }
})

<html>
<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
  <link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css" >
  <script src="https://unpkg.com/vue"></script>
  <script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>
</head>
<body>
  <div id="app">
    <div>
      <b-button @click="$refs.fileInput1.click()"> Load 1</b-button>
      <input type="file" ref="fileInput1"  style="display:none;"/>
    </div>
    <div>
      <b-button @click="$refs.fileInput2.click()"> Load 2</b-button>
      <b-form-file v-model="files" style="display:none;" ref="fileInput2" />
    </div>
  </div>
</body>
</html>

Yom T. · Accepted Answer · 2019-01-31 10:11:42Z

1

The $refs.fileInput2 here is referring to the Vue component, not really the input element, which is actually wrapped inside a div (you could see it if you inspect the rendered element). So one thing you could do (although it's ugly and not recommended, you should at least move this to the methods section):

app = new Vue({
  el: "#app",

  data: {
    files: '',
  }
})

<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css">
<link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.6.3/css/all.css">
<script src="https://unpkg.com/vue"></script>
<script src="https://unpkg.com/bootstrap-vue@latest/dist/bootstrap-vue.js"></script>

<div id="app">
  <div>
    <b-button @click="$refs.fileInput1.click()"> Load 1</b-button>
    <input type="file" ref="fileInput1" style="display:none;" />
  </div>

  <div>
    <b-button @click="$refs.fileInput2.$el.querySelector('input[type=file]').click()"> Load 2</b-button>
    <b-form-file v-model="files" style="display:none;" ref="fileInput2" />
  </div>
</div>

Although I would say you should just use the native file input element since you are hiding the <b-form-file/> anyway.

answered Jan 31, 2019 at 10:11

Yom T.

9,1982 gold badges35 silver badges52 bronze badges

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

3 Comments

Julian K Over a year ago

Thank you very much for the response. If I decided to go with the native file input, what would be a canonical way to know when the dialog was closed? I wanted to use vue component coupled with the watch function.

Yom T. Over a year ago

@JulianK See if any of these posts helps. Alternatively, have a look at oncancel event handler.

Julian K Over a year ago

Thank you very much for the assistance!

Riddhi · Accepted Answer · 2019-01-31 09:46:07Z

0

It's working fine.You may check the below fiddle. https://jsfiddle.net/tyagdvm5/

<b-form-file style="display:none;"  v-model="file2" choose-label="Attachment2"></b-form-file>

Or for accurate solution please create a fiddle and upload the link.

answered Jan 31, 2019 at 9:46

Riddhi

2,2541 gold badge11 silver badges17 bronze badges

Collectives™ on Stack Overflow

Vuejs input file form

2 Answers 2

3 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related