How to reset a FileUpload korrectly

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.)

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

Add comment

Bartosz Cylwik staff answered 1 year ago

0 0 Best answer

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

Add comment

Bartosz Cylwik staff answered 1 year ago

0 0 Best answer

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

And then inside the <code>getFileInputValue</code> method, inside the <code>else</code> statement:

<pre class="prettyprint"><code> ...
 } 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
 );
 }
</code></pre>

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

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

Please insert min. 20 characters.

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 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. 15 characters.

Add comment

Write

Create snippet

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: MDB4 6.7.3
Device: not relevant
Browser: chrome
OS: windows 10
Provided sample code: No
Provided link: No

almato

0Support score
5Questions 2Answers 0Snippets