node-red-contrib-chatbot/nodes/chatbot-image.html

REDBot a Chat bot for a full featured chat bot for Telegram, Facebook Messenger and Slack. Almost no coding skills required

<script type="text/javascript">
  $.RedBot.registerType('chatbot-image', {
    category: $.RedBot.config.name,
    color: '#FFCC66',
    defaults: {
      name: {
        value: ''
      },
      filename: { // for retrocompatibility
        value: ''
      },
      image: {
        value: ''
      },
      caption: {
        value: '',
        required: false
      }
    },
    inputs: 1,
    outputs: 1,
    icon: 'chatbot-image.png',
    paletteLabel: 'Image',
    label: function() {
      return this.name || 'Image';
    },
    oneditprepare: function() {
      if (this.filename != null && this.filename !== '' && (this.image == null || this.image === '')) {
        $('#node-input-image').val(this.filename);
      }
      $.RedBot.fetchPlatforms()
        .done(function(platforms) {
          $('#dialog-form').RB_Platforms();
        });
    }
  });
</script>

<script type="text/x-red" data-template-name="chatbot-image">
<div class="form-row">
  <label for="node-input-name"><i class="icon-tag"></i> Name</label>
  <input type="text" id="node-input-name" placeholder="Name">
</div>
<div class="form-row">
  <label for="node-input-image">Image</label>
  <input type="text" id="node-input-image" placeholder="Image file name or URL">
</div>
<div class="form-row">
  <label for="node-input-caption">Caption</label>
  <input type="text" id="node-input-caption" placeholder="Caption">
  <div class="redbot-platforms telegram slack viber whatsapp"/>
</div>

</script>

<script type="text/x-red" data-help-name="chatbot-image"><p>The <code>Image node</code> sends an image to the chatbot from a local file or from a URL or from a Buffer passed by an upstream node (the simplest way to use it to chain with to <code>File node</code> or a <code>Http node</code>).</p>
<p>To programmatically send an image with a <code>Function node</code></p>
<pre><code class="language-javascript">msg.payload = &#39;/my_dir/my_image.png&#39;;
</code></pre>
<p>or</p>
<pre><code class="language-javascript">msg.payload = {
  caption: &#39;I am the caption&#39;,
  image: &#39;http://www.my_host.com/my_dir/my_image.png&#39;
};
</code></pre>
<p>Available parameters for the <code>msg.payload</code></p>
<table>
<thead>
<tr>
<th>Name</th>
<th>Type</th>
<th>Description</th>
</tr>
</thead>
<tbody><tr>
<td>image</td>
<td>string or buffer</td>
<td>The image string could be a path for a local file or a URL (context variables can be used)</td>
</tr>
<tr>
<td>caption</td>
<td>string</td>
<td>Caption of the image. Only for Telegram, Slack and Viber</td>
</tr>
</tbody></table>
<p>An example of fetching an image with a <code>Http node</code></p>
<p><img src="https://s3.us-west-2.amazonaws.com/secure.notion-static.com/07070f97-c7c7-4d18-9af0-fcac0835cc32/example-image.png?X-Amz-Algorithm=AWS4-HMAC-SHA256&X-Amz-Content-Sha256=UNSIGNED-PAYLOAD&X-Amz-Credential=AKIAT73L2G45EIPT3X45%2F20230218%2Fus-west-2%2Fs3%2Faws4_request&X-Amz-Date=20230218T124908Z&X-Amz-Expires=3600&X-Amz-Signature=55549244074e76423c025d167cd9d55abf90675a6c757122bcf7669a1c338de8&X-Amz-SignedHeaders=host&x-id=GetObject" alt=""></p>
<p>Pay attention to select to select <em>binary buffer</em> in the <em>return</em> drop down of the <code>File node</code>.</p>
<p><strong>Viber</strong> only accepts <em>.jpg</em> images less than 1 Mb.</p>
</script>