Send Image in web messaging - Headless mode SDK

[kameysh]

Hi There,

I'm trying to send an image in headless mode SDK. Here is the following sequence which I'm using to send the image.

if (file) {
Genesys("command", "MessagingService.requestUpload", {
              file: file_list
            },
              function() {
                Genesys("subscribe", "MessagingService.uploading", function({ data }) {
                  console.log('uploading', data);
              });

              Genesys("subscribe", "MessagingService.uploadApproved", function({ data }) {
                console.log('file upoad approved', data);
            });

                Genesys("subscribe", "MessagingService.fileUploaded", function({ data }) {
                  console.log('uploaded Data', data);
                });
  }

Below is the implementation I'm using to send the image, but seems like its not working.

Sample imgData recieved from uploaded event.

{
      "attachmentId": "0d37ec58-xxxx-4b65-8b1d-9165f33e23ff",
      "downloadUrl": "https://api.usw2.pure.cloud/api/v2/downloads/pcebsdfsdfsb09937f8879a44",
      "timestamp": "2024-03-05T17:12:31.898Z"
  }

Genesys('command', 'MessagingService.sendMessage', {
        type: 'Attachment',
        message: imgData
    }, (data) => {
        /*fulfilled callback*/
        console.log(message, 'Image attachment sent from ui layer');
    }, (error) => {
        /*rejected callback*/
        if (error) {
            console.log(error);
        } else {
            console.log('Error sending message');
        }
    });

How to send the Image by calling the sendMessage command? What is the payload that needs to be sent to sendMessage command?

[vpirat]

Hi,

First step looks good for file upload.

Have you tried to "just" send a message. It should have the uploaded files context.
so, something like this:

Genesys('command', 'MessagingService.sendMessage', {
message: 'my attachment'
}, ....

Regards,
V.P.

[kameysh]

@vpirat, I tried it but upon sending it, i'm getting error in console stating e.message.trim is not a function.

[tim.smith]

@kameysh

e.message.trim is not a function

That likely means the message isn't a string. It could be undefined or something else (e.g. an object, number, array).

[kameysh]

@tim.smith, yes that's why I'm asking how to send an Image after it gets uploaded??? how to use the sendMessage command to send the image?

[kameysh]

Hi @tim.smith, let me know if any additional details are required from my end. Not sure how to send an image with sendMessage command after it gets uploaded. I don't find the example in documentation.

[vpirat]

Hi,

I do not see any specific data structure for sending attachments (with or without a message).
Looks like a defect here.
I would advise you to open a ticket with Care.

Best regards,
V.P.

[Ranjith_Manikante_Sa]

Hi @kameysh,

Couple of things:

1. Event subscriptions should happen before the requestUpload command but not in the success callback of that command, otherwise subscriptions will not be executed.
2. After the MessagingService.requestUpload command is successful, you can simply call MessagingService.sendMessage command without any message property (its optional) and the image would be automatically sent. You will do this subscribing to MessagingService.fileUploaded event.

Here is a working example script that will subscribe to the fileUploaded event and send the image.

// subscribe to the event first and send the file.
Genesys("subscribe", "MessagingService.fileUploaded", function() {
    console.log("sending file as message....");
    Genesys("command", "MessagingService.sendMessage");
});

// Make upload request. Here I'm fetching a random image from url and trying to upload it using MessagingService.requestUpload command.
const url = "https://picsum.photos/200/300"; 
let fileN = "";

fetch(url).then(async (response) => {
  const contentType = response.headers.get("content-type");
  const blob = await response.blob();
  fileN = new File([blob], "Name", {type: contentType});
  var dt = new DataTransfer();
  dt.items.add(fileN);
  var file_list = dt.files;
  Genesys("command", "MessagingService.requestUpload", {
    file: file_list
  });
});

Hope this answers, let me know if any questions.

[kameysh]

Hi @Ranjith_Manikante_Sa , Thanks for your input. That worked like a charm.