Blog

How to Create a Chat App That Supports Images (Part 3)

by Olha Danylova on October 1, 2019

In the final part of our article series about creating a chat app that supports sending and editing messages in real-time, we enable the inclusion of image attachments with messages.

To this point, we can send and edit messages as well as view the chat history. Now it’s time to add the ability to work with images in our chat. We’ll tell you what to do to send messages with images, save images from received messages, and delete these messages.

The previous parts of the series can be found here: Part 1 and Part 2.

Let’s start from where we stopped last time – you can download the project from the author’s repo at https://github.com/olgadanylova/BackendlessChatApp and switch to the textMessagingPart2 branch.

Displaying Messages With Image Attachments

For displaying messages with image attachments, we need the corresponding cells in the Chat View Controller table. Create and make them look like at the screenshot below:

These cells correspond to the MyImageCell.swift (for messages sent by you) and ImageCell.swift (for messages sent by other users) classes:

class MyImageCell: UITableViewCell {
    
    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var imageButton: UIButton!

    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

class ImageCell: UITableViewCell {

    @IBOutlet weak var userNameLabel: UILabel!
    @IBOutlet weak var dateLabel: UILabel!
    @IBOutlet weak var imageButton: UIButton!
    
    override func awakeFromNib() {
        super.awakeFromNib()
    }
}

To receive alert notifications and interactions when working with image-messages, we need the following functions in the Alert.swift class:

func showSendImageAlert(onViewController: UIViewController, cameraAction: UIAlertAction, galleryAction: UIAlertAction, cancelAction: UIAlertAction) {
    let alert = UIAlertController(title: nil, message: nil, preferredStyle: .actionSheet)
    alert.addAction(cameraAction)
    alert.addAction(galleryAction)
    alert.addAction(cancelAction)
    alert.view.tintColor = darkBlueColor
    onViewController.view.endEditing(true)
    onViewController.present(alert, animated: true)
}
    
func showSaveImageAlert(onViewController: UIViewController, image: UIImage, saveAction: UIAlertAction) {
    let alert = UIAlertController(title: "Save image to Photos", message: "Would you like to save this image in the photo library?", preferredStyle: .alert)
    alert.addAction(saveAction)
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))
    alert.view.tintColor = darkBlueColor
    onViewController.view.endEditing(true)
    onViewController.present(alert, animated: true)
}
    
func showSavedImageAlert(onViewController: UIViewController) {
    let alert = UIAlertController(title: "Saved", message: "Image has been saved in photo library", preferredStyle: .alert)
    alert.addAction(UIAlertAction(title: "OK", style: .default, handler: nil))
    alert.view.tintColor = darkBlueColor
    onViewController.view.endEditing(true)
    onViewController.present(alert, animated: true)
}
    
func showDeleteImageAlert(onViewController: UIViewController, deleteAction: UIAlertAction) {
    let alert = UIAlertController(title: "Delete image", message: "Would you like to delete this image from chat?", preferredStyle: .alert)
    alert.addAction(deleteAction)
    alert.addAction(UIAlertAction(title: "Cancel", style: .cancel, handler: nil))
    alert.view.tintColor = darkBlueColor
    onViewController.view.endEditing(true)
    onViewController.present(alert, animated: true)
}

Further work with images requires the camera or the photo library usage, so we need these permissions in the Info.plist file – NSCameraUsageDescription and NSPhotoLibraryUsageDescription:

Let’s move to the ChatViewController.swift class. We can unlock the addAttachment button and attach an image to a message – either taking it with the camera or by selecting it from the photo library.

We then need to add this property to the ChatViewController.swift class:

private var imageData: Data?

As new types of cells are added to our table, it is necessary to process them correctly. Update the cellForRowAt indexPath function:

func tableView(_ tableView: UITableView, cellForRowAt indexPath: IndexPath) -> UITableViewCell {
    let messageObject = messages[indexPath.row]
        
    let formatter = DateFormatter()
    formatter.dateFormat = "HH:mm:ss / MMM d, yyyy"
        
    if messageObject.userId == yourUser.objectId as String? {
        // text
        if let messageText = messageObject.messageText,
            let created = messageObject.created {
            let cell = tableView.dequeueReusableCell(withIdentifier: "MyTextMessageCell", for: indexPath) as! MyTextMessageCell
            cell.textView.text = messageText
            if let updated = messageObject.updated {
                cell.dateLabel.text = "updated " + formatter.string(from: updated)
            }
            else {
                cell.dateLabel.text = formatter.string(from: created)
            }
            let longPress = UILongPressGestureRecognizer(target: self, action: #selector(longPress(sender:)))
            longPress.minimumPressDuration = 0.5
            cell.addGestureRecognizer(longPress)
                
            return cell
        }
        // image
        if let imagePath = messageObject.imagePath,
            let created = messageObject.created {
            let cell = tableView.dequeueReusableCell(withIdentifier: "MyImageCell", for: indexPath) as! MyImageCell
            cell.imageButton.setTitle(imagePath,for: .normal)
            cell.imageButton.tag = indexPath.row
            cell.imageButton.addTarget(self,action:#selector(imageButtonClicked(sender:)), for: .touchUpInside)
            cell.dateLabel.text = formatter.string(from: created)
            return cell
        }
    }
    else if let userName = messageObject.userName {
        // text
        if let messageText = messageObject.messageText,
            let created = messageObject.created {
            let cell = tableView.dequeueReusableCell(withIdentifier: "TextMessageCell", for: indexPath) as! TextMessageCell
            cell.userNameLabel.text = userName
            cell.textView.text = messageText
            if let updated = messageObject.updated {
                cell.dateLabel.text = "updated " + formatter.string(from: updated)
            }
            else {
                cell.dateLabel.text = formatter.string(from: created)
            }
            return cell
        }
            // image
        else if let imagePath = messageObject.imagePath,
            let created = messageObject.created {
            let cell = tableView.dequeueReusableCell(withIdentifier: "ImageCell", for: indexPath) as! ImageCell
            cell.imageButton.setTitle(imagePath,for: .normal)
            cell.imageButton.tag = indexPath.row
            cell.imageButton.addTarget(self,action:#selector(imageButtonClicked(sender:)), for: .touchUpInside)
            cell.userNameLabel.text = userName
            cell.dateLabel.text = formatter.string(from: created)
            return cell
        }
    }
    return UITableViewCell()
}

Sending a message, as before, occurs when you click on the Send button. Backendless FileService is used to store image attachments on the server. The file will be saved to the FileService folder named “chatFiles” with an automatically generated filename. Next, let’s change the pressedSend function so that it looks like this:

@IBAction func pressedSend(_ sender: Any) {
    if !editMode {
        let messageObject = MessageObject()
        if let userName = yourUser.name {
            messageObject.userName = userName as String?
        }
        else if let userEmail = yourUser.email {
            messageObject.userName = userEmail as String?
        }
        messageObject.userId = yourUser.objectId as String?
            
        if let imageData = self.imageData,
            let imageName = messageInputField.text {
            self.imageData = nil
            self.imageModeDisabled()
            messageObject.imagePath = "chatFiles/" + imageName
            Backendless.sharedInstance().file.uploadFile("chatFiles/" + imageName, content: imageData, response: { uploadedPicture in
                if let index = self.messages.firstIndex(where: {$0.imagePath == "chatFiles/" + imageName}) {
                    DispatchQueue.main.async {
                        self.tableView.reloadRows(at: [IndexPath(item: index, section: 0)], with: .fade)
                    }
                }
            }, error: { fault in
                if let errorMessage = fault?.message {
                    self.alert.showErrorAlert(message: errorMessage, onViewController: self)
                }
            })
        }
                
        else if let messageText = messageInputField.text {
            messageObject.messageText = messageText.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
            self.clearMessageField()
        }
            
        messageStore.save(messageObject, response: { savedMessageObject in
            Backendless.sharedInstance()?.messaging.publish(self.channelName, message: savedMessageObject, response: { messageStatus in
            }, error: { fault in
                if let errorMessage = fault?.message {
                    self.alert.showErrorAlert(message: errorMessage, onViewController: self)
                }
            })
        }, error: { fault in
            if let errorMessage = fault?.message {
                self.alert.showErrorAlert(message: errorMessage, onViewController: self)
            }
        })
    }
    else {
        if let messageText = messageInputField.text {
            editingMessage?.messageText = messageText.trimmingCharacters(in: CharacterSet.whitespacesAndNewlines)
        }
        messageStore.save(editingMessage, response: { updatedMessageObject in
            self.editModeDisabled()
        }, error: { fault in
            if let errorMessage = fault?.message {
                self.alert.showErrorAlert(message: errorMessage, onViewController: self)
            }
        })
    }
}

As you can see, text messages and messages containing attachments are now processed in different ways.

View Attached Images

After sending/receiving a message with an image, the user can view it by clicking on the button with the image name:

@IBAction func imageButtonClicked(sender: UIButton) {
    self.performSegue(withIdentifier: "ShowImage", sender: sender)
}
    
override func prepare(for segue: UIStoryboardSegue, sender: Any?) {
    if segue.identifier == "ShowImage",
        let cell = (sender as! UIButton).superview?.superview as? UITableViewCell,
        let indexPath = tableView.indexPath(for: cell) {
        let message = messages[indexPath.row]
        if let imagePath = message.imagePath,
            let imageVC = segue.destination as? ImageViewController,
            let messageId = message.objectId,
            let messageUserId = message.userId {
            imageVC.messageId = messageId
            imageVC.messageUserId = messageUserId
            imageVC.shortImagePath = imagePath
        }
        else {
            alert.showErrorAlert(message: "Image not found", onViewController: self)
        }
    }
}

As you can see, the ImageViewController class is used to load an image from the Backendless File Service:

Interacting With Image Messages

Interaction with the message containing the image attachment also occurs through this class. Let’s look at it in more detail.

The Image View Controller consists of ImageView (which displays a picture), buttons to save an image and delete a message, and an indicator of the image loading process. The downloaded image is saved on the device for quick access in the future. When you click the save button, the user will be prompted to save the image to the gallery.

Deleting a message with a picture is available only to the user who sent it – this will delete the message itself, the image file in the FileService and the image from the device’s memory.

The complete implementation of the ImageViewController.swift class is presented below:

class ImageViewController: UIViewController {
    
    @IBOutlet weak var imageView: UIImageView!
    @IBOutlet weak var deleteButton: UIBarButtonItem!
    @IBOutlet weak var loadingIndicator: UIActivityIndicatorView!
    
    var messageId = ""
    var messageUserId = ""
    var shortImagePath: String = ""
    private var fullImagePath = ""    
    private let alert = Alert.shared
    
    override func viewDidLoad() {
        super.viewDidLoad()
        if Backendless.sharedInstance()?.userService.currentUser.objectId as String? != messageUserId {
            deleteButton.isEnabled = false
        }
        if let appId = Backendless.sharedInstance()?.appID,
            let apiKey = Backendless.sharedInstance()?.apiKey {
            fullImagePath = "https://backendlessappcontent.com/\(appId)/\(apiKey)/files/\(shortImagePath)"
            downloadImage(fullImagePath: fullImagePath)
        }
    }
    
    private func downloadImage(fullImagePath: String) {
        if let image = getImageFromUserDefaults(key: shortImagePath) {
            DispatchQueue.main.async {
                self.imageView.image = image
            }
        }
        else {
            loadingIndicator.startAnimating()
            URLSession.shared.dataTask(with: NSURL(string: fullImagePath)! as URL, completionHandler: { (data, response, error) -> Void in
                if error != nil {
                    Alert.shared.showErrorAlert(message: error?.localizedDescription ?? "", onViewController: self)
                }
                else if let imageData = data,
                    let image = UIImage(data: imageData) {
                    self.saveImageToUserDefaults(image: image, key: self.shortImagePath)
                    DispatchQueue.main.async {
                        self.imageView.image = image
                        self.loadingIndicator.stopAnimating()
                    }
                }
            }).resume()
        }
    }
    
    private func saveImageToUserDefaults(image: UIImage, key: String) {
        let userDefaults = UserDefaults.standard
        if let imageData = image.pngData() {
            userDefaults.setValue(imageData, forKey: key)
            userDefaults.synchronize()
        }
    }
    
    private func getImageFromUserDefaults(key: String) -> UIImage? {
        let userDefaults = UserDefaults.standard
        if let imageData = userDefaults.value(forKey: key) as? Data {
            return UIImage(data: imageData)
        }
        return nil
    }
    
    private func deleteImageFromUserDefaults(key: String) {
        let userDefaults = UserDefaults.standard
        userDefaults.removeObject(forKey: key)
        userDefaults.synchronize()
    }
    
    @objc private func image(_ image: UIImage, didFinishSavingWithError error: Error?, contextInfo: UnsafeRawPointer) {
        if let error = error {
            alert.showErrorAlert(message: error.localizedDescription, onViewController: self)
        } else {
            alert.showSavedImageAlert(onViewController: self)
        }
    }
    
    @IBAction func pressedSave(_ sender: Any) {
        if let image = imageView.image {
            let saveAction = UIAlertAction(title: "Save to Photos", style: .default, handler: { action in
                UIImageWriteToSavedPhotosAlbum(image, self, #selector(self.image(_:didFinishSavingWithError:contextInfo:)), nil)
            })
            alert.showSaveImageAlert(onViewController: self, image: image, saveAction: saveAction)
        }
    }
    
    @IBAction func pressedDelete(_ sender: Any) {
        let deleteAction = UIAlertAction(title: "Delete", style: .default, handler: { action in
            Backendless.sharedInstance()?.file.remove(self.shortImagePath, response: { removed in
                Backendless.sharedInstance()?.data.of(MessageObject.self)?.remove(byId: self.messageId, response: { removed in
                    self.deleteImageFromUserDefaults(key: self.shortImagePath)
                    self.performSegue(withIdentifier: "unwindToChatVC", sender: nil)
                }, error: { fault in
                    self.alert.showErrorAlert(message: fault?.message ?? "", onViewController: self)
                })
            }, error: { fault in
                self.alert.showErrorAlert(message: fault?.message ?? "", onViewController: self)
            })
        })
        alert.showDeleteImageAlert(onViewController: self, deleteAction: deleteAction)
    }
}

We now have a ready-made chat application in which you can send messages with both text and with attached images. You can also edit and delete these messages, saving the necessary data to the device.

The completed project can be found here:

https://github.com/olgadanylova/BackendlessChatApp

Thank you for reading and Happy Coding!

How to Create a Chat App That Supports Images (Part 3)

Displaying Messages With Image Attachments

View Attached Images

Interacting With Image Messages

Leave a Reply Cancel reply

Related Articles