JSQMessagesViewController - Send text Message with Attached Images File

Question

I am using JSQMessagesViewController for sending and receiving messages.It works well for text Messages. Is it possible to send Text Message with at

Answer 1

No it is not possible to send both as one message but you can send them as two messages with a unique custom identifier and then concat them together in your app.. Hope that help

Answer 2

To accomplish this task you will have to create a custom cell and then use that cell in your CollectionView

First of all subclass the JSQMessage class to something like following to keep the data for the image urls(attachments) -

class ChatMessage: JSQMessage {

    internal var attachments : [NSURL]?

    init(senderId: String!, senderDisplayName: String!, date: NSDate!, text: String!, attachments: [NSURL]?) {
        self.attachments = attachments
        super.init(senderId: senderId, senderDisplayName: senderDisplayName, date: date, text: text)
    }

    init(senderId: String!, senderDisplayName: String!, date: NSDate!, media: JSQMessageMediaData!) {
        super.init(senderId: senderId, senderDisplayName: senderDisplayName, date: date, media: media)
    }

    required init?(coder aDecoder: NSCoder) {
        fatalError("init(coder:) has not been implemented")
    } 

}

Now you will have to use this class for all your chat messages.

Next, you will have to create a custom xib file for your custom cell. In that xib you will add a label and image view for the message text and attachment icon.

Now create a class representing your custom cell. It will be something as follows -

class CustomCell: UICollectionViewCell {
    @IBOutlet weak var topLabel: UILabel!
    @IBOutlet weak var bottomLabel: UILabel!
    @IBOutlet weak var containerView: UIView!
    @IBOutlet weak var dataLabel: UILabel!
    @IBOutlet weak var attachmentIcon: UIImage!

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

Now we have to use this CustomCell in our JSQMessagesViewController subclass.

In viewDidLoad register your nib with the collection view

self.collectionView.registerNib(UINib(nibName: "CustomCell", bundle: nil), forCellWithReuseIdentifier: "CustomCell")

Now you can finally use your custom cell -

override func collectionView(collectionView: UICollectionView, cellForItemAtIndexPath indexPath: NSIndexPath) -> UICollectionViewCell {
    let message = messages[indexPath.item]

    if message.attachments.count() != 0 {
        let cell = collectionView.dequeueReusableCellWithReuseIdentifier("CustomCell", forIndexPath: indexPath) as! CustomCell

        cell.containerView.backgroundColor = UIColor.jsq_messageBubbleBlueColor()
        cell.containerView.layer.cornerRadius = 15
        return cell
    }

    else {
        // Add code here for the normal cell
    }
}

This should successfully render your custom cell.

Finally on tapping the custom view cell you can segue to a new VC (dont forget to pass your images data) and show the images appropriately.