Send and Receive Images

Overview

This guide covers sending and receiving images within a conversation.

Before you begin, make sure you added the SDK to your app and you are able to create a conversation.

NOTE: A step-by-step tutorial to build a chat application is available here.

This guide will make use of the following concepts:

Conversation Events - message events that fire on a Conversation, after you are a Member

Send an Image

Given a conversation you are already a member of:

let image = UIImage(named: "file.png")
guard let imageData = image?.pngData() else { return }

client.uploadAttachment(with: .image, name: "File name", data: imageData) { error, data in
    if let error = error {
        print("Error sending image: \(error.localizedDescription)")
        return
    }
    
    if let imageObject = data?["original"] as? [String: Any],
        let imageUrl = imageObject["url"] as? String {
        let imageMessage = NXMMessage(imageUrl: imageUrl)
        conversation.sendMessage(imageMessage, completionHandler: { [weak self] (error) in
            ...
        })
    }
}

Receive an Image URL

A message conversation event will be received when a member sends an image to a conversation:

Add NXMConversationDelegate as an extension to a ViewController or similar, and implement conversation(_ conversation: NXMConversation, didReceive event: NXMMessageEvent):

Note: The first method below is required when implementing NXMConversationDelegate:

extension ViewController: NXMConversationDelegate {
    func conversation(_ conversation: NXMConversation, didReceive error: Error) {
        NSLog("Conversation error: \(error.localizedDescription)")
    }
    func conversation(_ conversation: NXMConversation, didReceive event: NXMMessageEvent) {
        NSLog("Received image: \(event.imageUrl)")
    }
}

Have a ViewController, or similar, conform to NXMConversationDelegate and implement conversation:didReceiveMessageEvent::

Note: The first method below is required when implementing NXMConversationDelegate:

Download images from Vonage

Web client

To download an image you need you use the fetch image method.

Mobile client (Android, iOS)

To download an image you need to add JWT to the image retrieval request. The JWT is passed as an Authorization header (Authorization: Bearer <JWT> format). This is the JWT that was used to log in the user.

Various image libraries are handling request headers differently, so below you will full example for the most popular libraries. Notice the JWT being set as the Authorization header for the request:

You can download the image using URLSession:

func loadImage(urlString: String, token: String, completionHandler: @escaping (UIImage?) -> Void) {
    if let url = URL(string: urlString) {
        var request = URLRequest(url: url)
        request.setValue("Bearer \(token)", forHTTPHeaderField: "Authorization")
        let task = URLSession.shared.dataTask(with: request) { data, response, error in
            guard let data = data,
                  let httpResponse = response as? HTTPURLResponse,
                    (200...299).contains(httpResponse.statusCode),
                  error == nil else {
                completionHandler(nil)
                return
            }
            
            completionHandler(UIImage(data: data))
        }
        
        task.resume()
    }
}

When calling the above function make sure to update your UIImageView on the main thread:

loadImage(urlString: "IMAGE_URL", token: "JWT") { image in
    if let image = image {
        DispatchQueue.main.async {
            self.imageView.image = image
        }
    }
}