Load a CSV into NodeRED Dashboards (FlowFuse)

Dashboard 2.0 Load CSV

This simple flow allows the user to visualize data from a CSV in FlowFuse Dashboards.

The button then allows the user to initiate a request to send the data to the next step. This next step could be anything from loading into a SQL Database to saving it locally.

Dependencies

@flowfuse/node-red-dashboard

[{"id":"c2b5d452c4b51273","type":"group","z":"6e09408d4dd88daf","name":"Display CSV and Button to send data on","style":{"label":true},"nodes":["71c594d011fa2492","d074416fe75457f1","dd507559409e63cc","031e695eccd7a368","d0acd38d8f1c4606","7f0133a7dabb79a2","fec52337eeb29584","1f95ef1259a2713e","e8815f6505acc757"],"x":34,"y":39,"w":972,"h":122},{"id":"71c594d011fa2492","type":"ui-template","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","group":"ea5c3d2dcfb3462e","dashboard":"2daa43f2ba1b1c32","page":"76f6b77509a74a17","name":"UPLOAD","order":0,"width":0,"height":0,"head":"","format":"<v-file-input show-size multiple chips :rules=\"rules\" accept=\".csv\"\n    variant=\"underlined\" label=\"File input\" v-on:change=\"uploadFile\" v-model=\"value\"\n    active-color=\"primary\" @update:modelValue=\"send({payload: value})\" />\n","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","className":"","x":120,"y":80,"wires":[["d074416fe75457f1"]]},{"id":"d074416fe75457f1","type":"change","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"payload[0]","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":280,"y":80,"wires":[["dd507559409e63cc"]]},{"id":"dd507559409e63cc","type":"function","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","name":"Convert Hex to String","func":"const hexBuffer = msg.payload;\n\n// Convert the hex buffer to a Buffer object\nconst buffer = Buffer.from(hexBuffer, 'hex');\n\n// Convert the Buffer to a string\nconst string = buffer.toString();\n\n// Assign the string to msg.payload for further processing\nmsg.payload = string;\n\nreturn msg;","outputs":1,"timeout":0,"noerr":0,"initialize":"","finalize":"","libs":[],"x":480,"y":80,"wires":[["031e695eccd7a368"]]},{"id":"031e695eccd7a368","type":"csv","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","name":"","sep":",","hdrin":"","hdrout":"none","multi":"mult","ret":"\\n","temp":"","skip":"1","strings":true,"include_empty_strings":"","include_null_values":"","x":650,"y":80,"wires":[["fec52337eeb29584"]]},{"id":"d0acd38d8f1c4606","type":"ui-table","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","group":"b73dc5151c8cd587","name":"","label":"text","order":2,"width":0,"height":0,"maxrows":0,"autocols":true,"columns":[],"x":930,"y":80,"wires":[]},{"id":"7f0133a7dabb79a2","type":"ui-button","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","group":"b73dc5151c8cd587","name":"","label":"Send to ....","order":1,"width":0,"height":0,"passthru":false,"tooltip":"","color":"","bgcolor":"","className":"","icon":"","payload":"CSV","payloadType":"flow","topic":"topic","topicType":"msg","x":130,"y":120,"wires":[["e8815f6505acc757"]]},{"id":"fec52337eeb29584","type":"change","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","name":"","rules":[{"t":"set","p":"CSV","pt":"flow","to":"payload","tot":"msg"}],"action":"","property":"","from":"","to":"","reg":false,"x":790,"y":80,"wires":[["d0acd38d8f1c4606"]]},{"id":"1f95ef1259a2713e","type":"debug","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","name":"debug 4","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"false","statusVal":"","statusType":"auto","x":460,"y":120,"wires":[]},{"id":"e8815f6505acc757","type":"change","z":"6e09408d4dd88daf","g":"c2b5d452c4b51273","name":"","rules":[{"t":"set","p":"payload","pt":"msg","to":"CSV","tot":"flow"}],"action":"","property":"","from":"","to":"","reg":false,"x":300,"y":120,"wires":[["1f95ef1259a2713e"]]},{"id":"ea5c3d2dcfb3462e","type":"ui-group","name":"Group Name","page":"76f6b77509a74a17","width":"6","height":"1","order":-1,"showTitle":true,"className":""},{"id":"2daa43f2ba1b1c32","type":"ui-base","name":"UI Name","path":"/dashboard"},{"id":"76f6b77509a74a17","type":"ui-page","name":"Page Name","ui":"2daa43f2ba1b1c32","path":"/","icon":"","layout":"grid","theme":"c5ed292f3032aa43","order":-1,"className":""},{"id":"b73dc5151c8cd587","type":"ui-group","name":"CSV Table","page":"76f6b77509a74a17","width":"12","height":"1","order":-1,"showTitle":true,"className":""},{"id":"c5ed292f3032aa43","type":"ui-theme","name":"Theme Name","colors":{"surface":"#ffffff","primary":"#0094ce","bgPage":"#eeeeee","groupBg":"#ffffff","groupOutline":"#cccccc"}}]

Flow Info

Created 11 months, 2 weeks ago
Rating: 5 1

Owner

Actions

Rate:

Node Types

Core
  • change (x3)
  • csv (x1)
  • debug (x1)
  • function (x1)
Other

Tags

  • FlowFuse
  • Dashboard
  • CSV
  • File
  • Load
Copy this flow JSON to your clipboard and then import into Node-RED using the Import From > Clipboard (Ctrl-I) menu option