file input @change do not trigger function again

[geyermichael]

Hey all,

Maybe such a simple thing, but I do not know a solution. 🙈
I use a input type="file" with @change="foo. On first upload foo is triggered and works fine.
It opens a modal where I can save the file or cancel.
In case of cancel, I want upload the exact same file again, foo is not triggered.
I guess that's quite right, because actually there is no change, but that is not what I want.

Is it possible to "reset" an input with type file or do you know another vue directive which would work better?

Thanks a lot! 😃

[liulinboyi]

You can use this code

<script setup>
import { ref } from 'vue'
const file = ref()
/* reset */
function reset() {
  file.value.value = ''
}
function foo(event) {
  console.log(event.target.files)
}
</script>

<template>
  <input ref="file" type="file" @change="foo($event)" @click="reset">
</template>

Playground

Hope this can help you.

[geyermichael]

🙈 of course! Reset the value of the input element using ref.
Thank you.