# Upload a file from the Dashboard

**URL:** <https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357>\
**Category:** Dashboard\
**Tags:** dashboard-2\
**Created:** [29 May 2024 13:51 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357 "2024-05-29T13:51:19Z")\
**Posts on this page:** 1\
**Showing post:** 3

<div class="post-metadata">

**Author:** ![kitori](https://avatars.discourse-cdn.com/v4/letter/k/f08c70/32.png) [@kitori](https://discourse.nodered.org/u/kitori)\
**Post date:** [30 May 2024 07:06 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357/3 "2024-05-30T07:06:41Z")

</div>

ah missed that topic on search, sorry.

I just made a little adjustment: The chosenFile/uploadedFile is not an array, so i change uploadedFile[0] to uploadedFile. And then convert the buffer to a string for importing text files.

Thank you for your help 🙂

![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/0/20c280181ef6ba769318920c850c6c550fd655f8.png)

```auto
[{"id":"ac0d56d388a4daa4","type":"ui-template","z":"9ba1555b4c052436","group":"","page":"","ui":"","name":"Binary File Upload","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-card width=\"600\" height=\"300\" raised color=\"white\">\n <v-card-title>Upload binary file to Node-Red</v-card-title>\n <br>\n <v-card-text>\n <v-file-input label=\"Click here to select a file\" show-size v-model=\"uploadFile\">\n </v-file-input>\n <div>Progress: {{ progress }} bytes loaded</div>\n </v-card-text>\n <v-card-actions>\n <v-spacer></v-spacer>\n <v-btn right @click=\"startUpload\">Upload File</v-btn>\n </v-card-actions>\n </v-card>\n</template>\n\n<script>\n export default {\n data() {\n // define variables available component-wide\n // (in <template> and component functions)\n return {\n uploadFile: null,\n progress: 0 // <- initialize the v-model prop \n }\n },\n watch: {\n // watch for any changes of \"count\"\n },\n computed: {\n // automatically compute this variable\n // whenever VueJS deems appropriate\n },\n methods: {\n // expose a method to our <template> and Vue Application\n startUpload() {\n // debugger;\n if (!this.uploadFile) {\n return;\n } else {\n console.log(\"File selected\");\n console.log(this.uploadFile);\n if (!this.uploadFile) {\n console.warn('expected chosenFile to contain 1 item')\n return\n }\n const reader = new FileReader();\n \n // Use the javascript reader object to load the contents\n // of the file in the v-model prop\n reader.readAsArrayBuffer(this.uploadFile);\n reader.onload = () => {\n // this.data = reader.result;\n this.send({topic:\"upload\", payload: this.uploadFile, file:{name: this.uploadFile.name, size: this.uploadFile.size, type: this.uploadFile.type } });\n }\n reader.onprogress = (data) => {\n this.progress = data.loaded;\n }\n }\n\n }\n },\n mounted() {\n // code here when the component is first loaded\n },\n unmounted() {\n // code here when the component is removed from the Dashboard\n // i.e. when the user navigates away from the page\n }\n }\n</script>","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":1070,"y":1320,"wires":[["7c2cc0e98edc2535"]]},{"id":"df9661cfece5ac80","type":"debug","z":"9ba1555b4c052436","name":"debug 365","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":1550,"y":1320,"wires":[]},{"id":"7c2cc0e98edc2535","type":"function","z":"9ba1555b4c052436","name":"buffer2string","func":"msg.payload = msg.payload.toString()\nreturn msg;\n","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":1310,"y":1320,"wires":[["df9661cfece5ac80"]]}]

```

> [@Vuetify file upload - v-file-input](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/5):
>
> I created this very simple template node that allows me to upload a file to my home folder. [{"id":"dd7321d7195337c9","type":"ui-template","z":"0e3249ddee2000e3","group":"44010f4b04014d29","page":"","ui":"","name":"Binary File Upload","order":0,"width":0,"height":0,"head":"","format":"\<template\>\n \<v-card width=\"600\" height=\"300\" raised color=\"white\"\>\n \<v-card-title\>Upload binary file to Node-Red\</v-card-title\>\n \<br\>\n \<v-card-text\>\n \<v-file-input lab…

---

_[View the full topic](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357)._