Topic: How to reset a FileUpload korrectly
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));
},
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
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
FREE CONSULTATION
Hire our experts to build a dedicated project. We'll analyze your business requirements, for free.
Answered
- 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