Chat app with Ionic 3 & Firebase – Ep. 9 – Sending Images

Hi Friends,

Hope you are all well. This is episode 9 of my chat app series. In this post we’ll be seeing how to send images in chat.

Let’s begin.

A screencast of this post.


The code for this post is available here.

The complete code for this series is available here. (would appreciate it very much if you could add a star to the repo. Thanks)

I assume you already have a copy of the code (upto ep. 8). If not kindly grab a copy of it from my github profile.

First let’s add a button which upon clicking will allow us to choose an image from our phone’s file system.

Open buddychat.html file. Modify it as shown below.

Now open buddychat.ts and write the code for the sendPicMsg() function.

If you notice in the above code we are making use of the picmsgstore in our ImgHandlerProvider. Let’s go ahead and write that.

Open imghandler.ts file and add the below code.

Yes, this is exactly similar to the code we used for uploading profile picture images. We are just storing it in another directory. The guid function is to generate a random string to add to the image name when it get’s stored.

The final imghandler.ts file would look like this.

Notice that we are only resolving the image url from this promise. This url will be just a string which we can simply send it across like a message as we saw in the previous episode.

You can see that’s exactly what I am doing in the above lines.

Wait, this will just show up on the screen as a url right..? Aren’t we sending images. Let’s do some basic filtering to achieve this.

In the listener event for newmessage() under the zone add some code as shown below.

This above code simply filters the allmessages array and whichever string has the http prefix, we push a boolean value into another array called imgornot.

(This could be simply achieved by a map function, instead of a for loop; but again as I said this series is targeted towards beginners)

The complete buddychat.ts file would look as shown below now.

Alright, Now open up buddychat.html and modify it so that whenever a url appears as a message it is passed on as src to an image tag.

That’s it guys. Pretty simple right ? Now if everything goes fine you would be able to choose an image from your phone’s file system and send it across to your buddy.



In our next episode let’s see group chats. If you found this post helpful kindly share it with someone else and help them too.

Support me on patreon by clicking here. Or you could simply make a donation by clicking here.

Thanks for reading guys. Peace.

Liked it? Take a second to support admin on Patreon!
  • Abishai

    Hi, Thank you so much for great tutorial! .

    I wanted to capture either photo/video and send it in the chat . How can we accomplish that?

    Thanks in advance :)

  • Generalzod

    sir please or if any body has done it please can you help me in the episode where u add friends

    you can add a person more than once can any body help plssssssssssssss it very important and urgent i will appriceate

  • shubham amane

    Hi raja, It Good tutorials.

    Can it possible send doc or pdf file insted of image. I am self learner.
    If possible How?
    You have any example for send the doc file in chat using firebase.
    I want to implement send document and pdf file in chat system. I need your help.

    Please suggest me. Waiting You response.

  • Abhin Pai

    Hello, Is there any option to edit and delete the sent message