Reset input type file using vue.js


#1

Hello everyone!
I need to clear/reset input type file within Vue.js 2
Before I’ve used jQuery method clone:

var input = $(div).find("input[type='file']");
input.replaceWith(input.val('').clone(true));

Also I’ve tried to use such method:

input(type="file" accept="image/jpeg,image/png" ref="fileupload")
vm.$refs.fileupload.value = null;

But it don’t work for IE 11 and Android 4.4 default browser
How can I clear this input? I can’t use v-model for input because it doesn’t work in vue 2


#2
<input type="file" ref="fileInput">
methods: {
  reset() {
    const input = this.$refs.fileInput
    input.type = 'text'
    input.type = 'file'
  }
}

#3

@LinusBorg this doesn’t work for Android 4.2, 4.4 and 5.1 native browsers


#4

Really? Damn.


#5

https://jsfiddle.net/cL0d97yu/16/ this is the way I’ve tried it.


#6

I am no expert, though I do have an alternate solution, that seems to perform across the board…sorry if I am a little late to the party

https://jsfiddle.net/mpxb4Lq8/


#7

Actually, this worked for me~


#8

Very helpful. I works for me


#9

You were almost there with vm.$refs.fileupload.value = null
You can just use vm.$refs.fileupload.value = '' instead.