I wanted to understand how I can upload a file using Vuetify components. I was not really sure about entire concept how it should work, as the v-file-input only facilitates the UI part of it, and I was not sure how the upload would actually work. But I found the following example: https://codepen.io/scottorgan/pen/LYYgYga
I implemented this in a template node:
<template>
<v-container fill-height>
<v-row justify="center">
<v-col cols="auto">
<v-card width="600" height="300" raised color="white">
<v-card-title>Vuetify v-file-input Example:</v-card-title>
<br>
<v-card-text>
<v-file-input accept=".txt" label="Click here to select a .txt file" outlined v-model="chosenFile">
</v-file-input>
</v-card-text>
<v-card-actions>
<v-spacer></v-spacer>
<v-btn right @click="importTxt">Read File</v-btn>
</v-card-actions>
</v-card>
</v-col>
<v-col cols="auto">
<v-card width="600" height="300" raised color="white">
<v-card-title>File contents:</v-card-title>
<v-card-text>
<p>{{ data }}</p>
</v-card-text>
</v-card>
</v-col>
</v-row>
</v-container>
</template>
<script>
export default {
data() {
// define variables available component-wide
// (in <template> and component functions)
return {
chosenFile: null, // <- initialize the v-model prop
data: null
}
},
watch: {
// watch for any changes of "count"
},
computed: {
// automatically compute this variable
// whenever VueJS deems appropriate
},
methods: {
// expose a method to our <template> and Vue Application
importTxt() {
if (!this.chosenFile) {
this.data = "No File Chosen";
} else {
console.log("File selected");
console.log(this.chosenFile);
var reader = new FileReader();
// Use the javascript reader object to load the contents
// of the file in the v-model prop
reader.readAsText(this.chosenFile);
reader.onload = () => {
this.data = reader.result;
}
}
}
},
mounted() {
// code here when the component is first loaded
},
unmounted() {
// code here when the component is removed from the Dashboard
// i.e. when the user navigates away from the page
}
}
</script>
When I select a text file, I get an error:
I can see the file that I selected in the console log, that appears to be correct.
Is it just the case that the FileReader cannot be used in DB2? Based on this example, I assumed the DB2 implementation would be to read the file content and pass it on to Node-Red in a payload. Or this should be done in a different way?
