Twilio Conversations - Send Image

Question

The goal is to send an image using the conversations API (group chat) from the backend.

I see how you can use mediaUrl if it's just 1-1 messaging:

MessageResource.Create(
        body: "Hello there!",
        from: new Twilio.Types.PhoneNumber("+15555555555"),
        mediaUrl: mediaUrl,
        to: new Twilio.Types.PhoneNumber("+12316851234")
);

The above doesn't work for me as I'm looking to use a group chat will multiple members. Here is my current implementation for sending a text to multiple participants

// create a group chat
ConversationResource conversation = ConversationResource.Create(client: _twilioClient);

var bootyService = ParticipantResource.Create(
    identity: "myService",
    messagingBindingProjectedAddress: "+15555555555",
    pathConversationSid: conversation.Sid, 
    client: _twilioClient
);

// participant 1
var sender = ParticipantResource.Create(
    messagingBindingAddress: "+12316851234",
    pathConversationSid: conversation.Sid, 
    client: _twilioClient
);

// participant 2
var Receiver = ParticipantResource.Create(
    messagingBindingAddress: "+12316851234",
    pathConversationSid: conversation.Sid, 
    client: _twilioClient
);

var groupMessage = ConversationMessageResource.Create(
    body: "Hi this is a group chat",
    author: "myService",
    pathConversationSid: conversation.Sid, 
    client: _twilioClient
);

The conversations API doesn't have any concept of mediaURL. Is it possible to use Conversations MessageResource to send an image?

Answer 1

To send media to a conversation is a two part process, unlike sending an MMS message.

First you need to upload the media to the Media resource endpoint. This is by making a POST request to the URL https://mcs.us1.twilio.com/v1/Services/{Chat Service SID}/Media.

You can get the Chat Service SID by fetching a Conversation resource and inspecting the Chat Service SID returned. All conversations in the same conversation service will have the same Chat Service SID.

Once you have the Chat Service SID, you can upload the file. Here is an example in curl:

curl -u "<account_sid>:<account_secret>" --data-binary @<filename.png> -H "Content-Type: <content-type of upload>" https://mcs.us1.twilio.com/v1/Services/<chat_service_sid>/Media

Now that you have uploaded the media, you can use it in a conversation message. To do so, you need to pass an array of media objects that you want to send as part of the message. A media object has a content_type with the MIME type of the media, a filename, a size and the sid of the media resource you just created.

var groupMessage = ConversationMessageResource.Create(
    body: "Hi this is a group chat",
    author: "myService",
    pathConversationSid: conversation.Sid, 
    client: _twilioClient,
    media: {
      new {
        content_type = "image/png",
        size = 123456,
        filename: "filename.png",
        sid = "MEDIA_SID"
      }
    }]
);

(Please excuse my C# if that's not the right way to initialize a list of objects, hopefully it gets the idea across.)

Answer 2

For sake of completeness I'll post here what I have ended up doing - it's not pretty but doesn't seem like there a less ugly way to do it

TL;DR is you have to upload the image to Twilio as a Media object every time. In the response you get the SID and pass that through to the message you send with image

ConversationResource conversation = ConversationResource.Create(client: _twilioClient);
string postUrl = "https://mcs.us1.twilio.com/v1/Services/" + conversation.ChatServiceSid + "/Media";

string filePath = "./wwwroot/img/myImage.png";
FileStream fs = System.IO.File.OpenRead(filePath);
var formContent = new MultipartFormDataContent
{
    {new StreamContent(fs), "file", "myImage.png"}
};


var myHttpClient = new HttpClient();
myHttpClient.DefaultRequestHeaders.Authorization = new AuthenticationHeaderValue(
    "Basic", Convert.ToBase64String(
          System.Text.ASCIIEncoding.ASCII.GetBytes(_config.Twilio.AccountSid + ":" + _config.Twilio.AuthToken)));
var response = await myHttpClient.PostAsync(postUrl, formContent);
var stringContent = await response.Content.ReadFromJsonAsync<TwilioPost>();
var textImage = ParticipantResource.Create(
    identity: "myService",
    messagingBindingProjectedAddress: _config.Twilio.FromNumber,
    pathConversationSid: conversation.Sid,
    client: _twilioClient
);

if (stringContent != null && stringContent.Sid != null)
{
    var groupMessage = ConversationMessageResource.Create(
        body: body,
        mediaSid: stringContent.Sid,
        author: "myService",
        pathConversationSid: conversation.Sid,
        client: _twilioClient
    );
}

Answer 3

const client = require('twilio')(process.env.twilioAccountSid, process.env.twilioAuthToken);
client.messages.create({
   to: xxxxxxxxx,
   from: xxxxxxxxxx,
   mediaUrl:"" 
}).then(message=>{})