node-red-contrib-matrix-chat/src/matrix-send-image.html

<script type="text/javascript">
    RED.nodes.registerType('matrix-send-image',{
        category: 'matrix (deprecated)',
        color: '#00b7ca',
        icon: "matrix.png",
        outputLabels: ["success", "error"],
        inputs:1,
        outputs:2,
        defaults: {
            name: { value: null },
            server: { type: "matrix-server-config" },
            roomId: { value: null },
            contentType: { value: null }
        },
        label: function() {
            return this.name || "Send Image";
        },
        paletteLabel: 'Send Image'
    });
</script>

<script type="text/html" data-template-name="matrix-send-image">
    <style>
        .matrix-chat-alert {
            color: #b94a48;
            background-color: #f2dede;
            border-color: #eed3d7;
            margin: 30px 0;
            padding: 8px 35px 8px 14px;
        }

        .matrix-chat-alert a, .matrix-chat-alert a:active, .matrix-chat-alert a:hover {
            color: #b94a48;
            text-decoration: underline;
            font-weight: bold;
        }
    </style>
    <div class="matrix-chat-alert">
        <strong>Deprecation Warning!</strong> This node will be removed in a future release. We have consolidated the Send File & Send Image nodes into a single Upload File node (with more options). Read <a href="https://github.com/Skylar-Tech/node-red-contrib-matrix-chat/issues/102" target="_blank">here</a> for more info.<br>
        <br>
        Replace this node with a File Upload node attached to a Send Message node to accomplish the same behavior.
    </div>
    <div class="form-row">
        <label for="node-input-name"><i class="fa fa-tag"></i> Name</label>
        <input type="text" id="node-input-name" placeholder="Name">
    </div>
 	 <div class="form-row">
     	<label for="node-input-server"><i class="fa fa-user"></i> Matrix Server Config</label>
     	<input type="text" id="node-input-server">
 	</div>
    <div class="form-row">
        <label for="node-input-roomId"><i class="fa fa-comments"></i> Room ID</label>
        <input type="text" id="node-input-roomId" placeholder="msg.topic">
        <pre class="form-tips" id="node-input-roomId-error" style="color: #721c24;background-color: #f8d7da;border-color: #f5c6cb;margin-bottom: 12px;margin-top: 12px;display:none;"></pre>
    </div>
    <div class="form-row">
        <label for="node-input-contentType"><i class="fa fa-user"></i> Content-Type</label>
        <input type="text" id="node-input-contentType" placeholder="msg.contentType">
    </div>
    <div class="form-tips">
        Must be a valid <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types" target="_blank">MIME Type</a> (ex: image/png) or left empty
    </div>
    <script type="text/javascript">
        $(function(){
            $("#node-input-roomId").on("keyup", function() {
                if($(this).val() && !$(this).val().startsWith("!")) {
                    $("#node-input-roomId-error").html(`Room IDs start with exclamation point "!"<br />Example: !OGEhHVWSdvArJzumhm:matrix.org`).show();
                } else {
                    $("#node-input-roomId-error").hide();
                }
            }).trigger('keyup');
        });
    </script>
</script>

<script type="text/html" data-help-name="matrix-send-image">
    <h3>Details</h3>
    <p>This node will send an image to a Matrix chat room. Supports direct linking to a File In node. It's recommended you set <code>msg.contentType</code> so the client knows how to render the image (otherwise the image could show blank).</p>

    <h3>Inputs</h3>
    <dl class="message-properties">
        <dt>msg.payload
            <span class="property-type">File | string | Buffer | ReadStream | Blob</span>
        </dt>
        <dd> the contents of the image to upload. </dd>

        <dt>msg.topic
            <span class="property-type">string</span>
        </dt>
        <dd> Room ID to send image to. Ignored if configured on the node, otherwise required.</dd>

        <dt class="optional">msg.filename
            <span class="property-type">string | null</span>
        </dt>
        <dd> name of the image to upload (optional). Note: If this is not defined the file will receive a randomly generated name (without an extension).</dd>

        <dt class="optional">msg.body
            <span class="property-type">string | null</span>
        </dt>
        <dd> this will be the display name the client will see when rendered in their chat client. If this is left empty it will just display as "Attachment".</dd>

        <dt class="optional">msg.contentType
            <span class="property-type">string | null</span>
        </dt>
        <dd> Content <a href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Basics_of_HTTP/MIME_types" target="_blank">MIME Type</a>. Overridden if configured on the node. Optional but highly recommended (so the client receiving knows what type of file it is).</dd>

        <dt class="optional">msg.content
            <span class="property-type">object | null</span>
        </dt>
        <dd> craft your own msg.content to send to the server. If defined then <code>msg.filename</code>, <code>msg.contentType</code>, <code>msg.body</code>, and <code>msg.payload</code> aren't required since the file already exists.</dd>
    </dl>

    <h3>Outputs</h3>
    <ol class="node-ports">
        <li>Success
            <dl class="message-properties">
                <dt>msg.eventId <span class="property-type">string</span></dt>
                <dd>the eventId from the posted message.</dd>
            </dl>
        </li>
        <li>Error
            <dl class="message-properties">
                <dt>msg.error <span class="property-type">string</span></dt>
                <dd>the error that occurred.</dd>
            </dl>
        </li>
    </ol>
</script>