Topic: How to reset a FileUpload korrectly

almato free asked 1 year ago

I have a fileUploadDialog for encrypted Files.

On a Error by checking the Passwort it is nessesary to reset the fileinput

I hope my english is not to bad to understand my problem

Expected behavior

new fileupload is possible with the same file

Actual behavior

After an error by processing with a wrong password I have to open the file selector, discarding it and select the same file a second time.

Resources (screenshots, code snippets etc.)


      <div class="json-flex">
           <mdb-input class="input pw" label="Import/Export Passwort" v-model="exImpPw" />
           <mdb-file-input @getValue="getFileInputValue" accept="text/json" sm btnColor="primary"  v-model="uploadfile" btnTitle="JSON Importiern"
                                textFieldTitle="Json Datei mit SqlDaten" />


    getFileInputValue(files) {
        const fr = new FileReader();

        fr.addEventListener("load", () => {
            // this will then display a text file
            const decryptData = this.$backendService.decrypt(fr.result, this.exImpPw);
            if (decryptData != "") {
            } else {
                // ToDo : Uploadfile reset needed!   
                //  this is not enough
                this.uploadfile = "";

        }, false);


uploaddialog with password

Bartosz Cylwik staff answered 1 year ago

Hi, did you add the ref attribute to the mdb-file-input component? If so, is console.log(this.$refs.fileInput) showing anything? You can check if there is $el inside it while logging. If it's still not working you can try with id and querySelector to find the input. Best Regards!

almato free commented 1 year ago

OK my error now it works

FileList {0: File, length: 1} failed fileList before: FileList {0: File, length: 1} input value before: C:\fakepath\qs_dg_updateQsData.json fileList after: FileList {length: 0}length: 0[[Prototype]]: FileList input value after:

Thank You very much

Bartosz Cylwik staff answered 1 year ago

Hi. You can use refs to reset the file input value. Add ref attribute to the file input, for example:


And then inside the getFileInputValue method, inside the else statement:

      } else {
        // ToDo : Uploadfile reset needed!
        console.log("fileList before: ", files);
          "input value before: ",
        this.$refs.fileInput.$el.querySelector("input").value = null;
        console.log("fileList after: ", files);
          "input value after: ",

I placed some console logs so we can see how the value is changing.

Let me know if that works for you. Best Regards!

almato free commented 1 year ago

hello here the Log but $e1 is undefined

failed AdmSqlEdit.vue?cfcf:327 fileList before: FileList {0: File, length: 1}0: File {name: 'inslic_media_version_reference.json', lastModified: 1675235478645, lastModifiedDate: Wed Feb 01 2023 08:11:18 GMT+0100 (Mitteleuropäische Normalzeit), webkitRelativePath: '', size: 1586, …}length: 1[[Prototype]]: FileList AdmSqlEdit.vue?cfcf:328 Uncaught TypeError: Cannot read properties of undefined (reading '$el') at FileReader.eval (AdmSqlEdit.vue?cfcf:328:1) eval @ AdmSqlEdit.vue?cfcf:328 load (async) getFileInputValue @ AdmSqlEdit.vue?cfcf:312 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863 invoker @ vue.runtime.esm.js?2b0e:2188 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863 Vue.$emit @ vue.runtime.esm.js?2b0e:3903 fileChange @ index.js?91c9:45 change @ index.js?91c9:45 invokeWithErrorHandling @ vue.runtime.esm.js?2b0e:1863 invoker @ vue.runtime.esm.js?2b0e:2188 original._wrapper @ vue.runtime.esm.js?2b0e:6961

Please insert min. 20 characters.


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



Specification of the issue

  • ForumUser: Free
  • Premium support: No
  • Technology: MDB Vue
  • MDB Version: MDB4 6.7.3
  • Device: not relevant
  • Browser: chrome
  • OS: windows 10
  • Provided sample code: No
  • Provided link: No