How to reset a FileUpload korrectly


Topic: How to reset a FileUpload korrectly

almato asked 2 years 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.)

vue-template-snippet:

 <mdb-col>
      <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" />
        </div>
   </mdb-col>

Method:

    getFileInputValue(files) {
        console.log(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);
        fr.readAsText(files.item(0));

    },

uploaddialog with password


Bartosz Cylwik staff answered 2 years ago

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

  <mdb-file-input
    ref="fileInput"
    @getValue="getFileInputValue"
    ...
  />

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

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

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 commented 2 years 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


Bartosz Cylwik staff answered 2 years 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 commented 2 years 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


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
  • User: 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