Media templates using sample's URL

[xenastro]

Hello,

I have created custom image and video templates.

When I send an API request to get the template I get this response:

{
"data": [
{
"name": "test_marketing_video_template2",
"components": [
{
"type": "HEADER",
"format": "VIDEO",
"example": { "header_handle": [ "https://scontent.whatsapp.net/v/t61.29466-34/417271482_1347473265922276_3000753509338787921_n.mp4?ccb=1-7&_nc_sid=8b1bef&_nc_ohc=xlEfZNLjY24Ab5X3nyq&_nc_ht=scontent.whatsapp.net&edm=AH51TzQEAAAA&oh=01_Q5AaIKGC7UVpcwb0sunCZGZal1LRCC-KOvs5vTYT-AEHZDPc&oe=66548D09" ] }
},
{
"type": "BODY",
"text": "Dear {{1}},\n\nTake the chance to explore our new catalogue of new arrivals.\n\nCall us now to learn more.",
"example": { "body_text": [ [ "Osama" ] ] }
},
{
"type": "FOOTER",
"text": "This is an automated system message, do not reply."
},
{
"type": "BUTTONS",
"buttons": [
{
"type": "QUICK_REPLY",
"text": "Interested to learn more."
}
]
}
],
"language": "en",
"status": "APPROVED",
"category": "MARKETING",
"id": "1347473262588943"
}
],
"paging": {
"cursors": {
"before": "MAZDZD",
"after": "MjQZD"
}
}
}

All good so far.

Now I want to use this template to send a message to people, but I don't want to upload a new image or video, I want to use the media I already uploaded when creating the template, so I used the example's header_handle as the URL.

But when I try to send it I get this error from the webhook:

"errors": [
{
"code": 131053,
"title": "Media upload error",
"message": "Media upload error",
"error_data": {
"details": "Downloading media from weblink failed with http code 403, status message Forbidden"
}
}
]

Is there a way to use the media I already uploaded when creating the template?

If not, do I have to implement functionality in my site to upload media to WhatsApp and then use them when selecting a media template? was trying to avoid that because it is a lot of work!

[gabrieldwight]

Hi, did you define your app name and version check this discussion for your reference #74

It is a security feature added from cloud API to authorize the download of media. The links generated from cloud API is only valid for 5 minutes which they expire. The other workaround, if your media is hosted in a cloud storage or cdn you can use those links to display media template messages.

[gabrieldwight]

I was digging through the media template message documentation. You can let the cloud API download media templates on your behalf by passing the media id or the expiry URL on the request so that the user can see the media message received.

### creating a media template message which requires the header file created from resumable upload which means using media Id or media URL won't work in creation of templates I guess this will be static media tied to a particular template message

var resumableUploadMediaResult = await _whatsAppBusinessClient.CreateResumableUploadSessionAsync(fileInfo.fileSize, fileInfo.fileContentType, fileInfo.fileName);

if (resumableUploadMediaResult is not null)
{
				var uploadSessionId = resumableUploadMediaResult.Id;
				var resumableUploadResponse = await _whatsAppBusinessClient.UploadFileDataAsync(uploadSessionId, fileInfo.filePath, fileInfo.fileContentType);
				var queryResumableUploadStatus = await _whatsAppBusinessClient.QueryFileUploadStatusAsync(uploadSessionId);

				// Create the Resumable info in fileInfo
				fileInfo.fileResumableInfo = new ResumableFileInfo();

				if (resumableUploadResponse is not null)
				{
					fileInfo.fileResumableInfo.H = resumableUploadResponse.H; // This is the value needed for template creation for media messages
				}

				if (queryResumableUploadStatus is not null)
				{
					fileInfo.fileResumableInfo.StatusID = queryResumableUploadStatus.Id;
					fileInfo.fileResumableInfo.FileOffset = queryResumableUploadStatus.FileOffset;
				}
				fileInfo.fileUploadSuccess = true;
return fileinfo;
}

Sending a media template message

// Tested with facebook predefined template name: sample_movie_ticket_confirmation
ImageTemplateMessageRequest imageTemplateMessage = new ImageTemplateMessageRequest();
imageTemplateMessage.To = payload.SendText.ToNum;
imageTemplateMessage.Template = new ImageMessageTemplate();
imageTemplateMessage.Template.Name = payload.Template.Name;
imageTemplateMessage.Template.Language = new ImageMessageLanguage();
imageTemplateMessage.Template.Language.Code = LanguageCode.English_US;

imageTemplateMessage.Template.Components = new List<ImageMessageComponent>(); // Move this line here

imageTemplateMessage.Template.Components.Add(new ImageMessageComponent()
{
    Type = "header",
    Parameters = new List<ImageMessageParameter>()
    {
        new ImageMessageParameter()
        {
            Type = "image",
            Image = new WhatsappBusiness.CloudApi.Messages.Requests.Image()
            {
                Id = !string.IsNullOrEmpty(payload.Media.ID) ? payload.Media.ID : null,
				Link = string.IsNullOrEmpty(payload.Media.ID) ? payload.Media.URL : null,
                //Caption = !string.IsNullOrEmpty(payload.Caption) ? payload.Caption : null
            }
		}
    },
});

if (payload.Template.Params != null)
{
    // Loop and Compile Body Params
    var bodyParams = new List<ImageMessageParameter>();

    foreach (var txt in payload.Template.Params)
    {
        var param = new ImageMessageParameter()
        {
            Type = "text",
            Text = txt
        };
        bodyParams.Add(param);
    }

    // Add the Body Params
    imageTemplateMessage.Template.Components.Add(new ImageMessageComponent()
    {
        Type = "body",
        Parameters = bodyParams
    });
}

var results = await _whatsAppBusinessClient.SendImageAttachmentTemplateMessageAsync(imageTemplateMessage);
return results;

For downloading the media, I now recall the latest API version returns a byte data of the file downloaded from the downloadmediaasync function which you can decide either to save on your server or remote storage. You will find the code sample in the project sample

var mediaUrlResponse = await _whatsAppBusinessClient.GetMediaUrlAsync(audioMessage.SingleOrDefault().Audio.Id);

_logger.LogInformation(mediaUrlResponse.Url);

// To download media received sent by user
var mediaFileDownloaded = await _whatsAppBusinessClient.DownloadMediaAsync(mediaUrlResponse.Url);

var rootPath = Path.Combine(_webHostEnvironment.WebRootPath, "Application_Files\\MediaDownloads\\");

if (!Directory.Exists(rootPath))
{
    Directory.CreateDirectory(rootPath);
}

// Get the path of filename
string filename = string.Empty;

if (mediaUrlResponse.MimeType.Contains("audio/mpeg"))
{
    filename = $"{mediaUrlResponse.Id}.mp3";
}

if (mediaUrlResponse.MimeType.Contains("audio/ogg"))
{
    filename = $"{mediaUrlResponse.Id}.ogg";
}

var filePath = Path.Combine(_webHostEnvironment.WebRootPath, "Application_Files\\MediaDownloads\\", filename);

await System.IO.File.WriteAllBytesAsync(filePath, mediaFileDownloaded);

[gabrieldwight]

Creating and Managing Templates

[xenastro]

Sorry I should have made the context clearer.

I'm not talking about templates here, just the media.

I tried to write code that would upload media and then later call GetMediaUrlAsync and immediately after call DownloadMediaAsync, just like the sample you provided above, I saw it in the project files.

But when I do that, I get the error I posted:

System.ArgumentNullException
HResult=0x80004003
Message=Value cannot be null. (Parameter 'name')
Source=System.Private.CoreLib
StackTrace:
at System.ArgumentNullException.Throw(String paramName)
at System.ArgumentNullException.ThrowIfNull(Object argument, String paramName)
at System.ArgumentException.ThrowNullOrWhiteSpaceException(String argument, String paramName)
at System.ArgumentException.ThrowIfNullOrWhiteSpace(String argument, String paramName)
at System.Net.Http.Headers.HeaderUtilities.CheckValidToken(String value, String parameterName)
at System.Net.Http.Headers.ProductHeaderValue..ctor(String name, String version)
at System.Net.Http.Headers.ProductInfoHeaderValue..ctor(String productName, String productVersion)
at WhatsappBusiness.CloudApi.WhatsAppBusinessClient.d__139.MoveNext()
at WhatsappBusiness.CloudApi.WhatsAppBusinessClient.d__21.MoveNext()

Please test it yourself, upload something and then try to download it, does it work for you?

[gabrieldwight]

I have used this code:

On my side, it is working well as you can see in the screenshots below:

Getting Media Id

Getting Media Url

Downloading the media

Producing the argument null error

If you don't specify the app name and version on DI level you will get the error below but I have added additional parameters on the next update to specify appname and version on the Downloadasync method

[xenastro]

Thank you Gabriel, I was certain I was specifying app name and version when I last tested it, but maybe I missed something, I will test it again when I get the chance.

I have marked your response as the "answer".

Keep up the good work.