Msg.payload in UI Template Node scope handling

Dashboard
1

Hello all,

i want to create an upload file flow in Node-RED.
The classic upload form is not displayed, because i want to use the standard buttons of Node-RED.
Therfore i created a template nodes and one button node.

  1. Template: I stored the upload form in this node, which has a property of display:none.
  2. Template. I want to use the scope function to trigger a click on the chooseFileBtn which is not displayed.
  3. Button: When i click on the button it sends msg.payload: "click"

Mostly it works fine, but i´ve got one problem.
When i open the ui group in the browser the function is already triggered, but i just want the function to be started when i click on the button.

Thank you in advance!

First template Node:

<style>
    .background{
    display: none;
    }
</style>
<form>
  <input class ="background" type="file" id="chooseFileBtn" name="filename" display="none">
  <input class ="background" type="submit" id="submitFileUpload">
</form>

second Template

<script>
(function(scope) {
  scope.$watch('msg', function(msg) {
    if (msg.payload==="click") {
      // Do something when msg arrives
      //$("#my_"+scope.$id).html(msg.payload);
      var fileUpload = document.getElementById("chooseFileBtn")
      fileUpload.click()
      
    }
  });
})(scope);
</script>

flows.json

[{"id":"c99e652d.14b838","type":"ui_button","z":"185c2b4a.248bb5","name":"","group":"689a812a.8f6ff","order":0,"width":0,"height":0,"passthru":false,"label":"Datei auswählen","tooltip":"","color":"","bgcolor":"","icon":"","payload":"click","payloadType":"str","topic":"topic","topicType":"msg","x":85,"y":520,"wires":[["423f642b.1b660c","16359bf3.410cb4","af065707.b90af8"]],"l":false},{"id":"af065707.b90af8","type":"ui_template","z":"185c2b4a.248bb5","group":"689a812a.8f6ff","name":"","order":2,"width":0,"height":0,"format":"<style>\n    .background{\n    display: none;\n    }\n</style>\n<form>\n  <input class =\"background\" type=\"file\" id=\"chooseFileBtn\" name=\"filename\" display=\"none\">\n  <input class =\"background\" type=\"submit\" id=\"submitFileUpload\">\n</form>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":true,"templateScope":"local","x":315,"y":480,"wires":[[]],"l":false},{"id":"16359bf3.410cb4","type":"ui_template","z":"185c2b4a.248bb5","group":"689a812a.8f6ff","name":"","order":3,"width":0,"height":0,"format":"<script>\n(function(scope) {\n  scope.$watch('msg', function(msg) {\n    if (msg.payload===\"click\") {\n      // Do something when msg arrives\n      //$(\"#my_\"+scope.$id).html(msg.payload);\n      var fileUpload = document.getElementById(\"chooseFileBtn\")\n      fileUpload.click()\n      \n    }\n  });\n})(scope);\n</script>","storeOutMessages":false,"fwdInMessages":false,"resendOnRefresh":false,"templateScope":"local","x":285,"y":540,"wires":[[]],"l":false},{"id":"689a812a.8f6ff","type":"ui_group","name":"Config","tab":"f09e5867.fb2d18","order":1,"disp":true,"width":"6","collapse":false},{"id":"f09e5867.fb2d18","type":"ui_tab","name":"SplitterConfiguration","icon":"dashboard","order":4,"disabled":false,"hidden":false}]
2

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