microsoft/BotFramework-DirectLineJS

Post an activity with attachment occurs 502

ajishanv opened this issue · 3 comments

ajishanv commented

Error:

MicrosoftTeams-image
activity:

  directLine 
         .postMessageWithAttachments({

                  type: "message",

                  text: "Send base64 Uri file.",

                  from: {

                    id: state.currentUser.user.userID,

                    name: state.currentUser.user.displayName,

                    role: "agent",

                  },

                  attachments: [

                    {

                      contentType: "image/png",

                      contentUrl: attachment.uploadedFiles[0],

                      name: "test",

                    },

                  ],

                })

It works well if I comment the attachments then sent text only using post @activity to BotFramework.

What's the problem?

Tasks
Beta Give feedback
  1. DirectLine NodeJs - Duplicate Activity from bot #354
    Bot Services customer-replied-to customer-reported
    stevkan
  2. While sending attachment, activity API was not triggering using botframework-directlinejs #408
    Bot Services customer-replied-to customer-reported
    stevkan
ramfattah commented

Hi @ajishanv, I'm investigating.

  • 👍1
ramfattah commented

Hi @ajishanv,

I'm not able to reproduce this issue. I was able to send a message from the client to the bot with the ability to include attachments.

I tested the .postMessageWithAttachments method in WebChat Client.

Exaple:

  1. Creates a new instance of the DirectLine object from the botframework-directlinejs library
 const directLine = window.WebChat.createDirectLine({
      token: token
  });

Sharing the WebChat's createDirectLine method implementation detail.

  1. Call .postMessageWithAttachments method
directLine.postMessageWithAttachments({......})

Sharing full WebChat/DirectLine client code:

<!DOCTYPE html>
<html>

<head>
    <script src="https://cdn.botframework.com/botframework-webchat/latest/webchat.js"></script>
<style type="text/css">
    html,
    body {
        background-color: #f7f7f7;
        height: 100%;
    }

    body {
        background-image: url(/images/BotServices-Translucent.svg);
        background-position: 100% 100%;
        background-repeat: no-repeat;
        background-size: auto 50%;
        margin: 0;
    }

    #webchat {
        border-radius: 4px;
        box-shadow: 0 0 8px rgba(0, 0, 0, 0.08);
        height: calc(100% - 20px);
        left: 10px;
        overflow: hidden;
        position: fixed;
        top: 10px;
        width: 360px;
    }
</style>
</head>

<body>
    <div id="webchat"></div>
    <script>
        async function fetchToken() {
            const res = await fetch('http://localhost:5001/api/directline/token', { method: 'GET' });
            const { token } = await res.json();
            console.log("Token is: ", token);
            return token;
        }

        async function initializeWebChat() {
            const token = await fetchToken();

            const directLine = window.WebChat.createDirectLine({
                token: token
            });

            const files = {
                attachments : [
                    "data:image/jpeg;base64,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"
                ]
            }

            window.WebChat.renderWebChat({
                directLine: directLine,
                userID: 'YOUR_USER_ID',
                username: 'Web Chat User',
                locale: 'en-US'
            }, document.getElementById('webchat'));

            directLine.postMessageWithAttachments({
                type: "message",
                text: "Testing",
                from: {
                    id: "YOUR_USER_ID",
                    name: "Web Chat User",
                    role: "agent"
                },
                attachments: [
                    {
                        contentType: "image/png",
                        contentUrl: files.attachments[0], // base64 encoded image
                        name: "test"
                    }
                ]
            })
                .subscribe(
                    id => console.log(`Posted activity with attachment, assigned ID ${id}`),
                    error => console.log(`Error posting activity with attachment ${error}`)
                );
        }

        initializeWebChat();
    </script>
</body>

</html>

and the C# on message activity handler code for the bot:

// Copyright (c) Microsoft Corporation. All rights reserved.
// Licensed under the MIT License.

using System.Linq;
using System.Threading;
using System.Threading.Tasks;
using Microsoft.Bot.Builder;
using Microsoft.Bot.Schema;

namespace Microsoft.BotBuilderSamples.Bots
{
    public class EchoBot : ActivityHandler
    {
        protected override async Task OnMessageActivityAsync(ITurnContext<IMessageActivity> turnContext, CancellationToken cancellationToken)
        {
            var replyActivity = MessageFactory.Text($"You sent '{turnContext.Activity.Text}'");

            if (turnContext.Activity.Attachments != null && turnContext.Activity.Attachments.Any())
            {
                // Add a text to the reply indicating that an attachment was received
                replyActivity.Text += "\nAnd you've sent an attachment.";

                // Iterate over the attachments
                foreach (var attachment in turnContext.Activity.Attachments)
                {
                    // Echo back the attachment
                    replyActivity.Attachments.Add(attachment);
                }
            }

            await turnContext.SendActivityAsync(replyActivity, cancellationToken);
        }

    }
}

Webchat client output:
image

ramfattah commented

@ajishanv,

If you are still experiencing this issue, could you please provide minimal reproducible .zip sample?