File input for Node-Red Dashboard
This flow uses a template node to create an input file in Node-Red Dashboard.
This node once a file is selected will output the file as a binary string, the binary string is then converted into a Buffer and wrote to a new file in ~/.node-red/files folder.
[{"id":"81038f11.b67f7","type":"ui_template","z":"a8f420e0.97d56","group":"3d882eae.376e82","name":"fileInput","order":0,"width":"6","height":"1","format":"<div class=\"fileContainer\">\n <input type=\"file\" name=\"file\" id=\"file\" class=\"inputfile\" />\n <label for=\"file\">File</label>\n <p style=\"margin:auto\" id=\"fileName\"></p>\n <button class=\"vibrate filled touched smallfont rounded greybuttons\" ng-click=\"clear()\"> \n <ng-md-icon style=\"color: #fff;\" icon=\"clear\">\n <md-tooltip md-direction=\"bottom\">CLEAR</md-tooltip>\n </ng-md-icon>\n </button> \n</div>\n\n<style>\n .fileContainer {\n display: flex;\n }\n .inputfile {\n\twidth: 0.1px;\n\theight: 0.1px;\n\topacity: 0;\n\toverflow: hidden;\n\tposition: absolute;\n\tz-index: -1;\n}\n\n.inputfile + label {\n font-size: 1.25em;\n font-weight: 700;\n color: white;\n text-align: center;\n padding: 5px;\n width: 60px;\n background-color: black;\n}\n\n.inputfile:focus + label,\n.inputfile + label:hover {\n background-color: red;\n}\n\n.inputfile + label {\n\tcursor: pointer; /* \"hand\" cursor */\n}\n\n.inputfile:focus + label {\n\toutline: 1px dotted #000;\n\toutline: -webkit-focus-ring-color auto 5px;\n}\n\n.inputfile + label * {\n\tpointer-events: none;\n}\n\n</style>\n\n<script>\n(function(scope) {\n var fileInput = $('#file')\n var fileName = $('#fileName')\n \n scope.clear = function() {\n fileInput.val('').trigger('change')\n }\n \n fileInput.on('change', function(event) {\n var file = fileInput[0].files[0]; \n \n fileName.text(file ? file.name : '')\n \n if(file) {\n \n var reader = new FileReader();\n reader.readAsBinaryString(file);\n \n reader.onload = function() {\n scope.send({payload: reader.result, file: file.name})\n };\n reader.onerror = function() {\n console.log('Error while reading files');\n };\n } else\n scope.send({payload: null})\n })\n \n})(scope);\n</script>","storeOutMessages":true,"fwdInMessages":true,"templateScope":"local","x":341,"y":914,"wires":[["8fe07a42.69e968","dabb4a71.f8b6e8"]]},{"id":"dabb4a71.f8b6e8","type":"function","z":"a8f420e0.97d56","name":"","func":"var toDelete = !msg.payload\n\nif(!toDelete) {\n var buffer = new Buffer(msg.payload, \"binary\");\n node.send({topic: 'create', payload: buffer, filename: 'files/' + msg.file})\n flow.set('file', msg.file.name)\n}\n\n","outputs":1,"noerr":0,"x":544,"y":915,"wires":[["6d97ce52.003d7"]]},{"id":"6d97ce52.003d7","type":"file","z":"a8f420e0.97d56","name":"","filename":"","appendNewline":true,"createDir":false,"overwriteFile":"false","encoding":"none","x":780,"y":916,"wires":[[]]},{"id":"8fe07a42.69e968","type":"exec","z":"a8f420e0.97d56","command":"rm -rf files/*","addpay":false,"append":"","useSpawn":"false","timer":"","oldrc":false,"name":"","x":568,"y":984,"wires":[[],[],[]]},{"id":"3d882eae.376e82","type":"ui_group","z":"","name":"New Message","tab":"fce3a44.ffd5658","disp":true,"width":"6","collapse":false},{"id":"fce3a44.ffd5658","type":"ui_tab","z":"","name":"Whatsapp","icon":"dashboard","disabled":false,"hidden":false}]
