# \[ANNOUNCE\] node-red-contrib-data-uri

**URL:** <https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901>\
**Category:** Share Your Nodes\
**Created:** [11 September 2021 20:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901 "2021-09-11T20:33:11Z")\
**Posts on this page:** 9\
**Page:** 1

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [11 September 2021 20:33 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/1 "2021-09-11T20:33:11Z")

</div>

Hi folks,

Yesterday I got a question about embedded images with my [node-red-contrib-ui-web-push](https://github.com/bartbutenaers/node-red-contrib-ui-web-push#create-custom-notification-with-embedded-image) node. In this link you can see that it is possible to embed an image into a web push notification. For example when your camera capture an image of a burglar, you can send that image to your Android smartphone inside the notification:

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

However you need to include an _ **image URI** _ in the notification, which has some disadvantages:

1. You probably don't want the image to be public accessible to everybody on the internet.
2. The image should only be temporary available on the internet (until the client has read it). But you don't know how long ...

Luckily the web push notification [documentation](https://developer.mozilla.org/en-US/docs/Mozilla/Add-ons/WebExtensions/API/notifications/NotificationOptions) shows that the image url can be a _ **data URI** _:

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

A data URI means that the resource (in this case the camera snapshot image) will be base64 encoded and _ **included inside the URL** _. As a result the resource can be kept private, and can be removed after we have pushed it to our clients (e.g. Android smartphone).

To simplify this a bit, I developed the [node-red-contrib-data-uri](https://github.com/bartbutenaers/node-red-contrib-data-uri/blob/main/README.md) node 🍾 🥂 🥳

As always all _"constructive"_ feedback is very welcome !!

P.S. It is not available on NPM yet, so if you want to test it you can install it directly from my Github repository (from within your .node-red folder):

```auto
npm install bartbutenaers/node-red-contrib-data-uri

```

Have fun with it!!  
Bart

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [11 September 2021 21:25 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/2 "2021-09-11T21:25:08Z")

</div>

> [@BartButenaers](#):
>
> an _ **image URI** _ in

> [@BartButenaers](#):
>
> a _ **data URI** _ :

> [@BartButenaers](#):
>
> As always all _"constructive"_ feedback is very welcome !!

Not to be a "spelling nurd" (_I am not... rather the opposite as I can barly speel as it is 😛 thus I need clarification for my own understanding_ )

But are you referring to a special acronym when you type UR **I** instead of UR **L** , or is it in fact a typo?

**EDIT** - OK, forget that... Apparently a URI is a thing 😊 - [Uniform Resource Identifier - Wikipedia](https://en.wikipedia.org/wiki/Uniform_Resource_Identifier)

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [11 September 2021 21:37 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/3 "2021-09-11T21:37:05Z")

</div>

> [@Gunner](#):
>
> Apparently a URI is a thing

Yes, but most of the time I mix URI and URL. In this case I used URI based on this [wikipedia](https://en.wikipedia.org/wiki/Data_URI_scheme) article.

In [this](https://danielmiessler.com/study/difference-between-uri-url/#:~:text=The%20terms%20%E2%80%9CURI%E2%80%9D%20and%20%E2%80%9C,as%20HTTPs%20%2C%20FTP%20%2C%20etc.) link the difference between them is explained.  
But I'm not going to get a nightmare tonight, if I should have used URL instead of URI 😉

---

<div class="post-metadata">

**Author:** ![Gunner](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/gunner/32/43582_2.png) [@Gunner](https://discourse.nodered.org/u/Gunner)\
**Post date:** [11 September 2021 21:47 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/4 "2021-09-11T21:47:44Z")

</div>

> [@BartButenaers](#):
>
> But I'm not going to get a nightmare tonight, if I should have used URL instead of URI

That is good 😃

Unfortunately, I DO have issues understanding my own misspellings and math stuffs, let alone others, thus I asked.

And here I am with an extensive technical hobby in things where precision is paramount 🤪... go fig.

> [@BartButenaers](#):
>
> In [this](https://danielmiessler.com/study/difference-between-uri-url/#:~:text=The%20terms%20%E2%80%9CURI%E2%80%9D%20and%20%E2%80%9C,as%20HTTPs%20%2C%20FTP%20%2C%20etc.) link the difference between them is explained.

Thanks, now I can mentally think URL when reading this topic... not that I understand it much better anyhow 😊 But I try.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [11 September 2021 22:17 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/5 "2021-09-11T22:17:43Z")

</div>

> [@Gunner](#):
>
> I can mentally think URL when reading this topic

Don't know if it can help, but I had already added both "URL" and "URI" to the list of [keywords](https://github.com/bartbutenaers/node-red-contrib-data-uri/blob/main/package.json#L12). Hopefully that helps people to find their way to this node ...

---

<div class="post-metadata">

**Author:** ![TotallyInformation](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/totallyinformation/32/31_2.png) [@TotallyInformation](https://discourse.nodered.org/u/TotallyInformation)\
**Post date:** [12 September 2021 10:41 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/6 "2021-09-12T10:41:43Z")

</div>

A very helpful node Bart. I can envisage uses for this in all sorts of places.

For example, I use a data URI in my professional email signatures (for the BCS logo for example, sometimes for some corporate messages). Those will be displayed by email clients where external image links will not be (due to security issues).

---

<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 September 2021 11:54 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/7 "2021-09-12T11:54:49Z")

</div>

Hi Bart, sorry, honestly dont mean to rain on your parade but I just wanted to point out that if anyone has already installed [node-red-contrib-image-tools](https://flows.nodered.org/node/node-red-contrib-image-tools) and are using it for resizing / rotating an image etc before posting to Telegram or Notification etc, that it was already possible to generate a data URI of an image...

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

... the idea of including that feature in image-tools was exactly for this scenario where you would be working with images then would like to transmit it somewhere like Telegram or Email etc.

Obviously, this is limited to images unlike your node.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [12 September 2021 12:25 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/8 "2021-09-12T12:25:48Z")

</div>

Hi Steve,  
Thanks for the tip!  
Indeed the use case that I have described above, this might indeed be a good solution.  
I have added an [Alternatives](https://github.com/bartbutenaers/node-red-contrib-data-uri/blob/main/README.md#alternatives) section to my readme page, to mention this.

---

<div class="post-metadata">

**Author:** ![BartButenaers](https://sea2.discourse-cdn.com/flex026/user_avatar/discourse.nodered.org/bartbutenaers/32/10476_2.png) [@BartButenaers](https://discourse.nodered.org/u/BartButenaers)\
**Post date:** [13 September 2021 18:49 UTC](https://discourse.nodered.org/t/announce-node-red-contrib-data-uri/50901/9 "2021-09-13T18:49:42Z")

</div>

Version _ **1.0.0** _ is available in the Node-RED palette:

![image](https://us1.discourse-cdn.com/flex026/uploads/nodered/original/3X/9/7/97f5813f72297c5cfb4b0c2ea1c7f856ffba7486.png)