# Msg.payload in UI Template Node scope handling

**URL:** <https://discourse.nodered.org/t/msg-payload-in-ui-template-node-scope-handling/53385>\
**Category:** Dashboard\
**Tags:** node-red-dashboard\
**Created:** [8 November 2021 15:41 UTC](https://discourse.nodered.org/t/msg-payload-in-ui-template-node-scope-handling/53385 "2021-11-08T15:41:07Z")\
**Posts on this page:** 2\
**Page:** 1

<div class="post-metadata">

**Author:** ![IotDeveloper](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/iotdeveloper/32/75870_2.png) [@IotDeveloper](https://discourse.nodered.org/u/IotDeveloper)\
**Post date:** [8 November 2021 15:41 UTC](https://discourse.nodered.org/t/msg-payload-in-ui-template-node-scope-handling/53385/1 "2021-11-08T15:41:07Z")

</div>

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:

```auto
<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

```auto
<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

```auto
[{"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}]

```

---

<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:** [8 December 2021 15:41 UTC](https://discourse.nodered.org/t/msg-payload-in-ui-template-node-scope-handling/53385/2 "2021-12-08T15:41:57Z")

</div>

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