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>

score 1 · Accepted Answer · answered Jan 31 '19 at 10:11

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.

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. — Julian K, Feb 01 '19 at 12:30
@JulianK See if any of [these posts](https://stackoverflow.com/q/4628544/3634538) helps. Alternatively, have a look at [`oncancel`](https://developer.mozilla.org/en-US/docs/Web/API/GlobalEventHandlers/oncancel) event handler. — Yom T., Feb 01 '19 at 12:36

score 0 · Answer 2 · answered Jan 31 '19 at 09:46

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 '19 at 09:46

Riddhi

2,174
1
9
17

Vuejs input file form

2 Answers2