# 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:** 7\
**Page:** 1

<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:** [29 May 2024 13:51 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357/1 "2024-05-29T13:51:19Z")

</div>

Hi,

Can someone give me a hint, how i use the [vuetifyjs file-inputs](https://vuetifyjs.com/en/components/file-inputs/) component in a template node?

I want to upload a file(csv,json,xlsx,pdf) via the dashboard and send the filecontent as a buffer or text.

How do i watch the component, so on file upload, a msg with the filecontent is emittet.

![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/4/0/40c75256d6abec821dc6463f4e732633f35f1a70.png)

```auto
[{"id":"96743359434226b7","type":"ui-template","z":"9ba1555b4c052436","group":"","page":"","ui":"","name":"file-input","order":0,"width":0,"height":0,"head":"","format":"<template>\n <v-file-input label=\"File input\"></v-file-input>\n</template>\n<script> \n export default {\n data() {\n return {\n buffer_data: 0\n }\n },\n watch: {\n },\n computed: {\n },\n methods: {\n },\n mounted() {\n },\n unmounted() {\n }\n }\n</script>\n","storeOutMessages":true,"passthru":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":340,"y":1040,"wires":[["b1f2bd6d2177affa"]]},{"id":"b1f2bd6d2177affa","type":"debug","z":"9ba1555b4c052436","name":"debug 120","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","statusVal":"","statusType":"auto","x":530,"y":1040,"wires":[]}]

```

tryed:

```auto
<template>
      <v-file-input v-model="value" label="File input" @update:modelValue="send({payload: value})></v-file-input>
</template>

```

```auto
<template>
      <v-file-input label="File input" @update:modelValue="send({payload: modelValue})></v-file-input>
</template>

```

---

<div class="post-metadata">

**Author:** ![Steve-Mcl](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/steve-mcl/32/4826_2.png) [@Steve-Mcl](https://discourse.nodered.org/u/Steve-Mcl)\
**Post date:** [29 May 2024 14:56 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357/2 "2024-05-29T14:56:49Z")

</div>

See this thread. [Vuetify file upload - v-file-input - #2 by Steve-Mcl](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input/86087/2)

---

<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…

---

<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 10:02 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357/4 "2024-05-30T10:02:56Z")

</div>

I can't upload Files bigger than 1mb.

In the settings.js, i set `apiMaxLength: '100mb',`

I think the websocket conection drops and is then re-established

 ![grafik](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/2/1/21994fc47f817c2a59d34707d4ee5e3cb4fcd4fc.png)

Node-red log:  
`30 May 12:52:36 - [info] [ui-base:test] Disconnected YpH8X4VhUw7UNa-bAAAC due to transport error`

Do someone knows where this limit is comming from?  
[fail.txt](https://discourse.nodered.org/uploads/short-url/7cKglOfjH03peypmZ9slHqoaqE4.txt) (1.0 MB)  
[pass.txt](https://discourse.nodered.org/uploads/short-url/ccD7AI5e3pMmlZcJjhvtfygWPNL.txt) (971.2 KB)

...

Found it:  
add to settings.js:

```auto
    dashboard: {
       maxHttpBufferSize: 1e8 // size in bytes, example: 100 MB
    }

```

> **[Settings | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/settings.html)**
>
> Customize your Node-RED Dashboard 2.0 experience with detailed settings for optimal dashboard performance and appearance.

---

<div class="post-metadata">

**Author:** ![douchebagraccoon](https://avatars.discourse-cdn.com/v4/letter/d/d2c977/32.png) [@douchebagraccoon](https://discourse.nodered.org/u/douchebagraccoon)\
**Post date:** [30 May 2024 12:45 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357/5 "2024-05-30T12:45:38Z")

</div>

Hello, I think I found a solution for the file size. I posted it : [Vuetify file upload - v-file-input followup](https://discourse.nodered.org/t/vuetify-file-upload-v-file-input-followup/88380)

---

<div class="post-metadata">

**Author:** ![joepavitt](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/joepavitt/32/59722_2.png) [@joepavitt](https://discourse.nodered.org/u/joepavitt)\
**Post date:** [11 June 2024 13:17 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357/6 "2024-06-11T13:17:38Z")

</div>

Just to update here, we now have a file-upload example included in our documentation: [UI Template Examples | Node-RED Dashboard 2.0](https://dashboard.flowfuse.com/user/template-examples.html#file-upload)

---

<div class="post-metadata">

**Author:** ![system](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/1X/d073cd938eafa2e558d7c2cd59003b3ef4963033.png) [@system](https://discourse.nodered.org/u/system)\
**Post date:** [25 June 2024 13:18 UTC](https://discourse.nodered.org/t/upload-a-file-from-the-dashboard/88357/7 "2024-06-25T13:18:31Z")

</div>

This topic was automatically closed 14 days after the last reply. New replies are no longer allowed.