why i can't set input 's value to null(input's type is file) in vuejs

Question

new Vue({
  el: "#app",
  data: {
    msg: "hello world"
  },
  methods: {
    trigger: function() {
       
        var fileLoader = document.getElementById('fileLoader');
        //clear file value
        if(fileLoader.files.length > 0) {
          fileLoader.value == null;
          alert(fileLoader.files[0].name);        
        }
        fileLoader.click();

      },
      
    fetchData: function() {
      console.log('hello');
    }

  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <button @click="trigger">upload image</button>
  <input type="file" id="fileLoader"  v-show="false" @change="fetchData">
</div>

as you know in chrome, when you first time choose a file, input will trigger onchange event, but second time you choose the same file , input won't trigger onchange event,so i want to set input's value to null,before choose the same file, which works using jquery or plain javascript. but in vuejs, it dosen't work. what's the problem?

Stephan-v · Accepted Answer · 2017-10-16 09:26:05Z

You are doing a comparison instead of an assignment:

fileLoader.value == null;

This should be:

fileLoader.value = null;

Also this means you won't be able to alert the filename after you have done this, because the value has already been cleared by then. So this line should come before you clear it:

alert(fileLoader.files[0].name);

new Vue({
  el: "#app",
  data: {
    msg: "hello world"
  },
  methods: {
    trigger: function() {
       
        var fileLoader = document.getElementById('fileLoader');
        //clear file value
        if(fileLoader.files.length > 0) {
          alert(fileLoader.files[0].name);
          fileLoader.value = null;     
        }
        fileLoader.click();

      },
      
    fetchData: function() {
      console.log('hello');
    }

  }
});

<script src="https://cdn.jsdelivr.net/npm/vue"></script>

<div id="app">
  <button @click="trigger">upload image</button>
  <input type="file" id="fileLoader"  v-show="false" @change="fetchData">
</div>

Collectives™ on Stack Overflow

why i can't set input 's value to null(input's type is file) in vuejs

1 Answer 1

Comments

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Related