# Drag&Drop JSON in a drop zone in UI Dashboard

**URL:** https://discourse.nodered.org/t/drag-drop-json-in-a-drop-zone-in-ui-dashboard/98309
**Category:** Dashboard
**Tags:** node-red-dashboard
**Created:** [25 July 2025 08:50 UTC](https://discourse.nodered.org/t/drag-drop-json-in-a-drop-zone-in-ui-dashboard/98309 "2025-07-25T08:50:31Z")
**Posts on this page:** 4
**Page:** 1

<div class="post-metadata">

### Author: ![Julien](https://avatars.discourse-cdn.com/v4/letter/j/71e660/32.png) [@Julien](https://discourse.nodered.org/u/Julien)
#### Post date: [25 July 2025 08:50 UTC](https://discourse.nodered.org/t/drag-drop-json-in-a-drop-zone-in-ui-dashboard/98309/1 "2025-07-25T08:50:31Z")

</div>

Hello,

I try to create in my node red dashboard a drop zone where to drop a JSON. Then I want to run my flow from this input.

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/a/3/a345847619fc66f8c73e43e0812f234a0f88a488.png)

The code of the template node is the following:

```auto
<div id="dropZone"
  style="width: 300px; height: 150px; border: 2px dashed #ccc; line-height: 150px; text-align: center;">
  Drop your text here
</div>

<script>
  const dropZone = document.getElementById('dropZone');

  dropZone.addEventListener('dragover', (e) => {
    e.preventDefault();
    e.stopPropagation();
    dropZone.style.borderColor = 'blue';
  });

  dropZone.addEventListener('dragleave', (e) => {
    e.preventDefault();
    e.stopPropagation();
    dropZone.style.borderColor = '#ccc';
  });

  dropZone.addEventListener('drop', (e) => {
    e.preventDefault();
    e.stopPropagation();
    dropZone.style.borderColor = '#ccc';

    // Retrieve the dropped text
    const text = e.dataTransfer.getData('text/plain');

    if (text) {
      // Send the text to Node-RED flow
      if (typeof scope !== 'undefined' && scope.send) {
        scope.send({ payload: text });
      } else {
        console.log('Dropped text:', text);
      }
    } else {
      alert('No text data dropped');
    }
  });
</script>

```

and it gives this in the dashboard:

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/5/0/508b8fceefe93dd3f3d1be112890142e61b67ef3.png)

If I drop the JSON text in the "text input" it works well. But nothing from the template node.

Can someone help me?

Thanks

---

<div class="post-metadata">

### Author: ![omrid](https://avatars.discourse-cdn.com/v4/letter/o/77aa72/32.png) [@omrid](https://discourse.nodered.org/u/omrid)
#### Post date: [25 July 2025 10:18 UTC](https://discourse.nodered.org/t/drag-drop-json-in-a-drop-zone-in-ui-dashboard/98309/2 "2025-07-25T10:18:37Z")

</div>

Which input field are you using in the template?  
you can use a `v-textarea` in which you can either type or paste text, or `v-file-input` which allows you to drag & drop a file

---

<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: [25 July 2025 10:29 UTC](https://discourse.nodered.org/t/drag-drop-json-in-a-drop-zone-in-ui-dashboard/98309/3 "2025-07-25T10:29:00Z")

</div>

> [@omrid](#):
>
> `v-textarea` in which you can either type or paste text, or `v-file-input`

This looks like the user is using the old depreciated dashboard 1. `v-xxx` components are Dashboard 2.0 only.

@Julien  
As for why it doesnt work, `scope.send` is only accessible when you property wrap your code (see the ui\_template built in help)

---

<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: [24 August 2025 10:29 UTC](https://discourse.nodered.org/t/drag-drop-json-in-a-drop-zone-in-ui-dashboard/98309/4 "2025-08-24T10:29:51Z")

</div>

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