requestUpload Command in MessagingService Plugin

Web Messaging
1

We are trying to upload a file using the requestUpload command from MessagingService Plugin in the Javascript SDK. The documentation () mentions that:

To upload a file, makes an "onAttachment" request over WebSocket connection to get a signed URL

Reference: https://developer.genesys.cloud/commdigital/digital/webmessaging/messengersdk/SDKCommandsEvents/messagingServicePlugin#messagingservice-requestupload

However, in order to send the "onAttachment" request we need the WebSocket connection and we are not sure how to get that using the Javascript SDK, since the startConversation command does not return the connection object to us.
We know that we can use the Web messaging Guest API to initiate the WebSocket connection oursevles instead of using startConversation in the SDK but we are not sure if this is the intended way.
Can anyone provide advice on how to upload file using the SDK only?

2

Hi @CTINT_Frankie,

It automatically creates a WebSocket connection if there isn't one, you don't need the connection instance for yourself. Ideally, it would have been created when you already executed commands MessagingService.startConversation or MessagingService.sendMessage, it will reuse that WebSocket connection and request file upload there, if not it will create one. All communication automatically happens in the same WebSocket connection.

For testing, you can simply copy paste our code example there (provide a valid image url). Under the browser network tab, you will see WebSocket connection created where it makes these requests. Once uploaded MessagingSerivce.fileUploaded event is published. Note that, it is only upload request and in order to send this attachment as a message, you need to subscribe to this event and simply execute MessagingService.sendMessage command. Or it will be sent in the next MessagingService.sendMessage command request that you make to send a text message.

4

Thank you for the reply and explanation. Regarding the url, with Web messaging Guest API, we can request a presigned url and upload the image there. Can we do the same with the SDK or must we generate the url ourselves?

5

I guess I should rephrase my question, how do we request a presigned URL to upload attachment using the SDK only? Sorry if I am missing something obvious.

6

Hi @CTINT_Frankie you can subscribe to MessagingService.uploadApproved event to get the presigned url - please see documentation here. This event will include with presigned url in the uploadURL data along with headers there.

This event is published in response to MessagingService.requestUpload command.

7

Hi @Ranjith_Manikante_Sa,

Thank you for the reply. But we need the presigned url to call the MessagingService.requestUpload command in the first place.

const url = "<ImageUrl>"; 
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
  });
});
8

@CTINT_Frankie thats incorrect. You don't need the pre-signed url to call MessagingService.requestUpload command. But you need to call this command to get the pre-signed url.

May I ask why do you need pre-signed url? Whats the action you are trying to perform with that?

In general, you don't need the pre-signed url for yourself. Assuming you want to upload file and send it, let me try giving you the steps needed to that:

  1. Call MessagingService.requestUpload command passing the file (You write - existing script)
  2. This will get the pre-signed url and store it internally, (no action needed from your side).
  3. File is uploaded automatically and MessagingService.fileUploaded event is published. This will contain the download url for that file (no action needed from your side). Note that this file is only uploaded, but not yet sent as a message. Uploading and sending are 2 separate actions.
  4. Subscribe to MessagingService.fileUploaded event and call MessagingService.sendMessage command to send it. (You write this code).

Working sample code:

const url = "https://res.cloudinary.com/demo/image/upload/v1312461204/sample.jpg"; 
let fileN = "";

// #3. First, subscribe to fileUploaded event to send it when you receive it. 

Genesys("subscribe", "MessagingService.fileUploaded", function name(params) {
   Genesys("command", "MessagingService.sendMessage"); // This command will automatically send any uploaded file (along with text message if any)
});

// #1 and #2 steps above

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
  });
});

Sequence of steps:

  1. Command - MessagingService.requestUpload
  2. Event published - MessagingService.uploadApproved
  3. Event published - MessagingService.uploading
  4. Event published - MessagingService.fileUploaded
  5. Call command MessagingService.sendMessage to send that file.

uploadApproved and fileUploaded event will contain attachmentId that you can even compare before sending.

Does this write-up help somehow? Let me know.

9

@Ranjith_Manikante_Sa Thank you for the write-up. I have misunderstood the use of pre-signed url. I have reviewed my code following your instructions and I can upload file successfully now, thank you so much for the help.

10

This topic was automatically closed 30 days after the last reply. New replies are no longer allowed.