How to send a file via directLine.postMessageWithAttachments?

Question

"Good day, I am using the chatbot API to create a custom UI. I send files through directLine.postMessageWithAttachments where I provide the following object:

{ 
text: string, 
type: string, 
attachments: [
  { 
    thumbnailUrl: '', 
    contentUrl: '', 
    contentType: file.type, 
    name: file.name, 
    content: { file } 
  }
] 	
}

However, HTML arrives at the server, not the uploaded file. Can you tell me what I did wrong? Thank you."

Answer 1

@Viktor Poliakov Welcome to Microsoft Q&A Forum, Thank you for posting your query here!

.

.

Please refer this GitHub thread comment which has a complete client side and the server side code:

https://github.com/microsoft/BotFramework-DirectLineJS/issues/409#issuecomment-1631375904

.

.

More information:

It looks like there might be an issue with how the file content is being handled in your directLine.postMessageWithAttachments method. The content property should not be used to directly include the file. Instead, you should use the contentUrl property to provide a URL to the file.

.

Here’s an example of how you can structure your message to send a file:

{
  text: "Here is the file",
  type: "message",
  attachments: [
    {
      contentType: file.type,
      contentUrl: "data:" + file.type + ";base64," + base64EncodedFile,
      name: file.name
    }
  ]
}

In this example:

• contentUrl is set to a base64-encoded string of the file.
• contentType is the MIME type of the file.
• name is the name of the file.

.

Make sure to convert your file to a base64-encoded string before sending it. You can use the FileReader API in JavaScript to achieve this:

const file = ...; // Your file object
const reader = new FileReader();
reader.onload = function(event) {
  const base64EncodedFile = event.target.result.split(',')[1];
  // Now you can use base64EncodedFile in your message
};
reader.readAsDataURL(file);

This should ensure that the file is correctly sent as an attachment via the Direct Line API. Hope this helps. If you have any follow-up questions, please let me know. I would be happy to help.

**

Please do not forget to "Accept the answer” and “up-vote” wherever the information provided helps you, this can be beneficial to other community members.