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.
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:
To receive alert notifications and interactions when working with image-messages, we need the following functions in the Alert.swift
class:
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:
As new types of cells are added to our table, it is necessary to process them correctly. Update the cellForRowAt
indexPath
function:
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:
As you can see, text messages and messages containing attachments are now processed in different ways.
After sending/receiving a message with an image, the user can view it by clicking on the button with the image name:
As you can see, the ImageViewController
class is used to load an image from the Backendless File Service:
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:
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!