# Send updated images

**URL:** https://discourse.nodered.org/t/send-updated-images/28228
**Category:** General
**Created:** [12 June 2020 13:24 UTC](https://discourse.nodered.org/t/send-updated-images/28228 "2020-06-12T13:24:10Z")
**Posts on this page:** 18
**Page:** 1

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [12 June 2020 13:24 UTC](https://discourse.nodered.org/t/send-updated-images/28228/1 "2020-06-12T13:24:10Z")

</div>

hallo master, can someone help me about my problem?  
I want to make a system simulation on node-red. I want to send some image data from my file. the image in the file is the image produced by my camera and saved directly in the file.

however, for simulations I want to send 5 sample images in my local file, but alternately with a range of 30 seconds.  
can someone help me?

regards,  
budiman

---

<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: [12 June 2020 14:48 UTC](https://discourse.nodered.org/t/send-updated-images/28228/2 "2020-06-12T14:48:13Z")

</div>

Hi, can you provide more info?

What system is this node-red on? PI? Windows box?

> [@budiman098](#):
>
> I want to send some image data from my file

Where do you want to send it? Email? MQTT? TCP?

> [@budiman098](#):
>
> image produced by my camera and saved directly in the file

What camera? Phone Camera? RPi camera? Web Camera?  
Why write to file? You can probably get the image and send it without ever writing a file (but I will need details)

> [@budiman098](#):
>
> however, for simulations I want to send 5 sample images in my local file, but alternately with a range of 30 seconds.

I'm having difficulty understand what you mean here.  
Is this what you want...

- send file 1
- 30s later, send file 2
- 30s later, send file 3
- 30s later, send file 4
- 30s later, send file 5
- 30s later, send file 1
- 30s later, send file 2
- 30s later, send file 3
- and so on

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [12 June 2020 15:00 UTC](https://discourse.nodered.org/t/send-updated-images/28228/3 "2020-06-12T15:00:06Z")

</div>

sorry steve.  
i want send file in node-red dasboard.

the image must be save in my local file because i want take samo proces in image, so the image must be seved.

for the sending picture, i want send image 1, 30s leter, send file 2. as you made it.

thank you

---

<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: [12 June 2020 15:08 UTC](https://discourse.nodered.org/t/send-updated-images/28228/4 "2020-06-12T15:08:48Z")

</div>

What have you tried?

show us where you are stuck.

Screen shot and / or export of the flow will do.

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [12 June 2020 15:36 UTC](https://discourse.nodered.org/t/send-updated-images/28228/5 "2020-06-12T15:36:53Z")

</div>

![discussion](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/d/8/d89fe90cead7ba8126339ecf89d3b428db216345.png)  
in the red box, i try send image from file in raspberry, but in this node only read 1 image, and not send to dashboard.

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [12 June 2020 15:41 UTC](https://discourse.nodered.org/t/send-updated-images/28228/6 "2020-06-12T15:41:46Z")

</div>

when i try media node, here make a dasboard but the image will be sending need to be more specific and just one image.  
 ![media](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/7/0/705ec403e9e8aa5f82a418202fbcbc7dc1641cb7.jpeg)

---

<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: [12 June 2020 15:51 UTC](https://discourse.nodered.org/t/send-updated-images/28228/7 "2020-06-12T15:51:22Z")

</div>

Use an inject to trigger the function every 30s  
In the function, a counter watches & increments between 1 ~ 5 & sends a filename in `msg.filename` (read the built in help for the file node in the side-bar info tab on the Right hand side of node-red to understand why this works)

 ![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/6/96bdfd06b6ed0b534b1c7e85cac5c9d793fa924e.png)

```auto
[{"id":"6019f410.ec184c","type":"inject","z":"a2a9b7f9.ae1948","name":"","topic":"","payload":"","payloadType":"date","repeat":"30","crontab":"","once":false,"onceDelay":0.1,"x":310,"y":580,"wires":[["9348b369.d99af"]]},{"id":"9348b369.d99af","type":"function","z":"a2a9b7f9.ae1948","name":"5 images - EDIT ME","func":"\nvar counter = context.get(\"counter\") || 0;\ncounter++;\nif(counter > 5) {\n counter = 1;\n}\nswitch(counter){\n case 1:\n msg.filename = \"file name 1\"\n break\n case 2:\n msg.filename = \"file name 2\"\n break\n case 3:\n msg.filename = \"file name 3\"\n break\n case 4:\n msg.filename = \"file name 4\"\n break\n case 5:\n msg.filename = \"file name 5\"\n break\n}\ncontext.set(\"counter\", counter); //save the counter for next time\nreturn msg;","outputs":1,"noerr":0,"x":520,"y":580,"wires":[["a7609482.669108"]]},{"id":"a7609482.669108","type":"debug","z":"a2a9b7f9.ae1948","name":"","active":true,"tosidebar":true,"console":false,"tostatus":false,"complete":"true","targetType":"full","x":730,"y":640,"wires":[]}]

```

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [12 June 2020 16:35 UTC](https://discourse.nodered.org/t/send-updated-images/28228/8 "2020-06-12T16:35:18Z")

</div>

thank you steve, is very helpful.  
but in this case the image will send in develop mode node-red not in dashboard. i try to connect the ui media, the image not send to dasboard.  
why its not worked?

and let me ask one more thing, in this code we enter the name of the picture, may we not enter the name of the picture? because the actual system of naming the image will be done by the microcontroler by itself. so all images will be saved in 1 file. can we input without having to be named?

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [12 June 2020 16:46 UTC](https://discourse.nodered.org/t/send-updated-images/28228/9 "2020-06-12T16:46:31Z")

</div>

![file](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/e/9ed77bea0d90a4233655418723b2c8169f1a62e2.png)  
i try to connect ui media node, but ist not work because ui media just provide one file like this picture, when i want to edit more file its not be able to entered file.

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [14 June 2020 10:48 UTC](https://discourse.nodered.org/t/send-updated-images/28228/10 "2020-06-14T10:48:58Z")

</div>

@PaulKeates1 like say @Steve-Mcl. the topic is duplicat with this topic.  
Steve has helped me, but I want to use the image data displayed on the dashboard, and when I use UI-Media, it can't display more than 1 image, like the screenshot above.  
thank you.

---

<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: [14 June 2020 11:20 UTC](https://discourse.nodered.org/t/send-updated-images/28228/11 "2020-06-14T11:20:35Z")

</div>

> [@budiman098](#):
>
> can't display more than 1 image

Do you mean you want 2 or 5 images shown all at the same time?  
OR  
You want the image to be changed every 30s like the original question?

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [14 June 2020 11:55 UTC](https://discourse.nodered.org/t/send-updated-images/28228/12 "2020-06-14T11:55:42Z")

</div>

yes steve, i want image change every 30s in dashboard.  
can ui-media make it?

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [14 June 2020 11:57 UTC](https://discourse.nodered.org/t/send-updated-images/28228/13 "2020-06-14T11:57:11Z")

</div>

or maybe there are nodes that can replace it, may I know?

---

<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: [14 June 2020 12:08 UTC](https://discourse.nodered.org/t/send-updated-images/28228/14 "2020-06-14T12:08:50Z")

</div>

Use standard HTML `<img>` in ui\_template (no need for additional nodes)

your `function` that gets filename \>\> `file in` node (return a buffer) \>\> `ui_template` node with this in the ui\_template : `<img ng-src="{{msg.payload}}"/>`

example...

```auto
[{"id":"68c3bd33.b27cb4","type":"inject","z":"a2a9b7f9.ae1948","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":240,"y":600,"wires":[["835336f5.6ce7e8"]]},{"id":"95291454.e1da48","type":"ui_template","z":"a2a9b7f9.ae1948","group":"8e0dc95.8c8f838","name":"html image in ui_template","order":0,"width":"6","height":"6","format":"<img ng-src=\"{{msg.payload}}\"/>","storeOutMessages":true,"fwdInMessages":true,"resendOnRefresh":false,"templateScope":"local","x":930,"y":600,"wires":[[]]},{"id":"b8f8e93.e40a518","type":"function","z":"a2a9b7f9.ae1948","name":"jpg encode buffer","func":"var getImageResult = msg.payload;\nvar b64encoded = getImageResult.toString('base64');\nmsg.payload = \"data:image/jpg;base64,\" + b64encoded;\nreturn msg;","outputs":1,"noerr":0,"x":680,"y":600,"wires":[["95291454.e1da48"]]},{"id":"835336f5.6ce7e8","type":"file in","z":"a2a9b7f9.ae1948","name":"","filename":"c:/temp/pic1.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","x":460,"y":600,"wires":[["b8f8e93.e40a518"]]},{"id":"5dc9a83f.3b79a8","type":"file in","z":"a2a9b7f9.ae1948","name":"","filename":"c:/temp/pic2.jpg","format":"","chunk":false,"sendError":false,"encoding":"none","x":460,"y":660,"wires":[["b8f8e93.e40a518"]]},{"id":"96b5eeef.e647e","type":"inject","z":"a2a9b7f9.ae1948","name":"","topic":"","payload":"","payloadType":"date","repeat":"","crontab":"","once":false,"onceDelay":0.1,"x":240,"y":660,"wires":[["5dc9a83f.3b79a8"]]},{"id":"8e0dc95.8c8f838","type":"ui_group","z":"","name":"Test1","tab":"fa8ca888.ede6d8","order":1,"disp":true,"width":"6","collapse":false},{"id":"fa8ca888.ede6d8","type":"ui_tab","z":"","name":"Home","icon":"dashboard","order":1}]

```

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [15 June 2020 09:16 UTC](https://discourse.nodered.org/t/send-updated-images/28228/15 "2020-06-15T09:16:55Z")

</div>

thank you @Steve-Mcl, i will try

---

<div class="post-metadata">

### Author: ![budiman098](https://avatars.discourse-cdn.com/v4/letter/b/3ab097/32.png) [@budiman098](https://discourse.nodered.org/u/budiman098)
#### Post date: [15 June 2020 09:45 UTC](https://discourse.nodered.org/t/send-updated-images/28228/16 "2020-06-15T09:45:17Z")

</div>

@Steve-Mcl can i ask something again sir?

---

<div class="post-metadata">

### Author: ![DeekshaPatkar](https://avatars.discourse-cdn.com/v4/letter/d/b782af/32.png) [@DeekshaPatkar](https://discourse.nodered.org/u/DeekshaPatkar)
#### Post date: [22 June 2020 14:40 UTC](https://discourse.nodered.org/t/send-updated-images/28228/17 "2020-06-22T14:40:45Z")

</div>

what can you send me the complete json file....  
iam trying to upload image from my pc to website...

---

<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: [6 July 2020 14:40 UTC](https://discourse.nodered.org/t/send-updated-images/28228/18 "2020-07-06T14:40:47Z")

</div>

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