Holiday Notice: Support will be provided on a limited scale from December 24th, 2024, to January 2nd, 2025. Happy holidays and a wonderful New Year!


Topic: Reset File input to null

Gonçalo Bastos free asked 1 year ago


Hello, I'm currently using MDBootstrap Vue for free, and I'm loving it, even considering purchasing a license. However, there are a few things I would like to know before doing so. I saw some posts from a few years ago, so there might be a solution by now.

Is there any way to reset the file input by setting it to null again?

This is because I have a toggle that, when the user activates/deactivates it, I need to set the file input to null.

<MDBFile ref="fileInput" v-model="uploadFile.file" :accept="fileTypes" />

updateEuropeanUnion()
{
    this.uploadFile.file = null;
    (this.$refs.fileInput as HTMLInputElement).value = null;
    console.log(this.$refs.fileInput as HTMLInputElement)
    this.uploadFile.updateEuropeanUnion = !this.uploadFile.updateEuropeanUnion;
}

Bartosz Cylwik staff answered 1 year ago


Hi! You can look for the input and set its value to an empty array aswell. Seems to work for me in this snippet

https://mdbootstrap.com/snippets/vue/b-cylwik/5794150#html-tab-view

Best Regards!



Please insert min. 20 characters.

FREE CONSULTATION

Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.

Status

Answered

Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB5 4.0.0
  • Device: Computer
  • Browser: Chrome
  • OS: Windows 10
  • Provided sample code: Yes
  • Provided link: No