Bootstrap-vue: Problem on reset form file

Created on 9 Jun 2017  路  3Comments  路  Source: bootstrap-vue/bootstrap-vue

When setting null value to model of b-form-file, filename not changed,
there is example of my behavior for reset a form file value.
https://jsfiddle.net/3dw5djb1/6/

Enhancement

Most helpful comment

v0.17.0 has now been released and this issue _should_ be addresed.

Please refer to the update docs for details.

Try out the latest, and if you run into issues/bugs, please create an issue

All 3 comments

This appears to be how the v-model is internally bound, It is currently bound as a one way. File inputs are a bit different than other inputs, as they only allow you to programmatically set the value to an empty string, which makes the two-way v-model not work correctly in some cases.

I might be able to modify the behaviour to handle two way binding to allow you to set it to null or an empty string, or introduce a reset()method that could be called.

Because of the limitations of file inputs in Vue, and browser limitation on file input value setting, PR #535 adds a reset() method to the component that you can call to clear the file from the input. You will need a reference to the file component:

<div id="app">
  <b-form-file ref="fileinput" v-model="file"></b-form-file>
  <p>Selected file: {{ file ? file.name : '' }}</p>
  <b-btn @click="clear()">Clear File</b-btn>
</div>
window.app = new Vue({
  el: '#app',
  data: {
    file: null
  },
  methods:{
    clear(){
        this.$refs.fileinput.reset();
    }
  }
});

v0.17.0 has now been released and this issue _should_ be addresed.

Please refer to the update docs for details.

Try out the latest, and if you run into issues/bugs, please create an issue

Was this page helpful?
0 / 5 - 0 ratings

Related issues

StephenPCG picture StephenPCG  路  3Comments

radostnomne picture radostnomne  路  3Comments

ronjouch picture ronjouch  路  3Comments

tpines picture tpines  路  3Comments

ghost picture ghost  路  3Comments