I've encountered an issue with a file reader where it only loads the file properly from the second time onwards, behaving like a queue. The first time I select a file, it seems to skip loading.
Is there a way to resolve this problem?
Below is the code snippet:
<v-text-field
v-if="switch1"
label="Upload Fattura"
@click='onPickFile'
v-model='fatturaFileName'
prepend-icon="mdi-paperclip"
></v-text-field>
<input
type="file"
style="display: none"
ref="fileInput"
accept="text/xml"
@change="onFilePicked"
>
onPickFile () {
this.$refs.fileInput.click();
}
onFilePicked (event) {
if (event) event.preventDefault();
var files = event.target.files[0];
if (files !== undefined) {
this.fatturaFileName = files.name;
// If valid, continue
const fr = new FileReader();
fr.readAsText(files);
fr.addEventListener('load', () => {
this.fatturaUpload = fr.result;
});
} else {
this.fatturaFileName = ''
this.fatturaFileObject = null
}
console.log(this.fatturaUpload);
}