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.

<ion-header>
  <ion-navbar color="hcolor">
  <ion-title>{{buddy.displayName}}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="sendPicMsg()">
        <ion-icon name="camera"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>
</ion-header>


<ion-content #content>
  <div class="chatwindow">
  <ion-list no-lines>
    <ion-item *ngFor="let item of allmessages; let i=index" text-wrap>
        <ion-avatar item-left *ngIf="item.sentby === buddy.uid">
          <img src ="{{buddy.photoURL}}">
        </ion-avatar>
        <div class="bubble me"  *ngIf="item.sentby === buddy.uid"><h3>{{item.message}}</h3>
        </div>
        <ion-avatar item-right *ngIf="item.sentby != buddy.uid">
          <img src ="{{photoURL}}">
        </ion-avatar>
        <div class="bubble you"  *ngIf="item.sentby != buddy.uid"><h3>{{item.message}}</h3>
        </div>
    </ion-item>
  </ion-list>
  </div>
</ion-content>
<ion-footer ion-fixed>    
  <ion-toolbar class="no-border" color="white">        
    <ion-input [(ngModel)]="newmessage" placeholder="Write your message ..."></ion-input>  
    <ion-buttons end>
      <button ion-button (click)="addmessage()">
        <ion-icon name="send" color="primary"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>    
</ion-footer>

<ion-header>

<ion-navbar color="hcolor">

<ion-title>{{buddy.displayName}}</ion-title>

<ion-buttons end>

<ion-icon name="camera"></ion-icon>

</button>

</ion-buttons>

</ion-navbar>

</ion-header>

<ion-content #content>

<ion-list no-lines>

<ion-item *ngFor="let item of allmessages; let i=index" text-wrap>

<ion-avatar item-left *ngIf="item.sentby === buddy.uid">

</ion-avatar>

<div class="bubble me" *ngIf="item.sentby === buddy.uid"><h3>{{item.message}}</h3>

</div>

<ion-avatar item-right *ngIf="item.sentby != buddy.uid">

</ion-avatar>

<div class="bubble you" *ngIf="item.sentby != buddy.uid"><h3>{{item.message}}</h3>

</div>

</ion-item>

</ion-list>

</div>

</ion-content>

<ion-footer ion-fixed>

<ion-toolbar class="no-border" color="white">

<ion-input [(ngModel)]="newmessage" placeholder="Write your message ..."></ion-input>

<ion-buttons end>

<ion-icon name="send" color="primary"></ion-icon>

</button>

</ion-buttons>

</ion-toolbar>

</ion-footer>

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

sendPicMsg() {
    let loader = this.loadingCtrl.create({
      content: 'Please wait'
    });
    loader.present();
    this.imgstore.picmsgstore().then((imgurl) => {
      loader.dismiss();
      this.chatservice.addnewmessage(imgurl).then(() => {
        this.scrollto();
        this.newmessage = '';
      })
    }).catch((err) => {
      alert(err);
      loader.dismiss();
    })
  }

sendPicMsg() {

let loader = this.loadingCtrl.create({

content: 'Please wait'

});

loader.present();

this.imgstore.picmsgstore().then((imgurl) => {

loader.dismiss();

this.chatservice.addnewmessage(imgurl).then(() => {

this.scrollto();

this.newmessage = '';

})

}).catch((err) => {

alert(err);

loader.dismiss();

})

}

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.

picmsgstore() {
    var promise = new Promise((resolve, reject) => {
        this.filechooser.open().then((url) => {
          (<any>window).FilePath.resolveNativePath(url, (result) => {
            this.nativepath = result;
            (<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {
              res.file((resFile) => {
                var reader = new FileReader();
                reader.readAsArrayBuffer(resFile);
                reader.onloadend = (evt: any) => {
                  var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg' });
                  var uuid = this.guid();
                  var imageStore = this.firestore.ref('/picmsgs').child(firebase.auth().currentUser.uid).child('picmsg' + uuid);
                  imageStore.put(imgBlob).then((res) => {
                      resolve(res.downloadURL);
                    }).catch((err) => {
                        reject(err);
                    })
                  .catch((err) => {
                    reject(err);
                  })
                }
              })
            })
          })
      })
    })    
     return promise;   
  }

  guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

picmsgstore() {

var promise = new Promise((resolve, reject) => {

this.filechooser.open().then((url) => {

(<any>window).FilePath.resolveNativePath(url, (result) => {

this.nativepath = result;

(<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {

res.file((resFile) => {

var reader = new FileReader();

reader.readAsArrayBuffer(resFile);

reader.onloadend = (evt: any) => {

var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg' });

var uuid = this.guid();

var imageStore = this.firestore.ref('/picmsgs').child(firebase.auth().currentUser.uid).child('picmsg' + uuid);

imageStore.put(imgBlob).then((res) => {

resolve(res.downloadURL);

}).catch((err) => {

reject(err);

})

.catch((err) => {

reject(err);

})

}

})

return promise;

}

guid() {

function s4() {

return Math.floor((1 + Math.random()) * 0x10000)

.toString(16)

.substring(1);

}

return s4() + s4() + '-' + s4() + '-' + s4() + '-' +

s4() + '-' + s4() + s4() + s4();

}

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.

import { Injectable } from '@angular/core';
import { File } from '@ionic-native/file';
import { FileChooser } from '@ionic-native/file-chooser';
import { FilePath } from '@ionic-native/file-path';
import firebase from 'firebase';
/*
  Generated class for the ImghandlerProvider provider.

  See https://angular.io/docs/ts/latest/guide/dependency-injection.html
  for more info on providers and Angular 2 DI.
*/
@Injectable()
export class ImghandlerProvider {
  nativepath: any;
  firestore = firebase.storage();
  constructor(public filechooser: FileChooser) {
  }

  
 /*
 
 For uploading an image to firebase storage.

 Called from - profilepic.ts
 Inputs - None.
 Outputs - The image url of the stored image. 
  
  */
  uploadimage() {
    var promise = new Promise((resolve, reject) => {
        this.filechooser.open().then((url) => {
          (<any>window).FilePath.resolveNativePath(url, (result) => {
            this.nativepath = result;
            (<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {
              res.file((resFile) => {
                var reader = new FileReader();
                reader.readAsArrayBuffer(resFile);
                reader.onloadend = (evt: any) => {
                  var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg' });
                  var imageStore = this.firestore.ref('/profileimages').child(firebase.auth().currentUser.uid);
                  imageStore.put(imgBlob).then((res) => {
                    this.firestore.ref('/profileimages').child(firebase.auth().currentUser.uid).getDownloadURL().then((url) => {
                      resolve(url);
                    }).catch((err) => {
                        reject(err);
                    })
                  }).catch((err) => {
                    reject(err);
                  })
                }
              })
            })
          })
      })
    })    
     return promise;   
  }

  picmsgstore() {
    var promise = new Promise((resolve, reject) => {
        this.filechooser.open().then((url) => {
          (<any>window).FilePath.resolveNativePath(url, (result) => {
            this.nativepath = result;
            (<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {
              res.file((resFile) => {
                var reader = new FileReader();
                reader.readAsArrayBuffer(resFile);
                reader.onloadend = (evt: any) => {
                  var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg' });
                  var uuid = this.guid();
                  var imageStore = this.firestore.ref('/picmsgs').child(firebase.auth().currentUser.uid).child('picmsg' + uuid);
                  imageStore.put(imgBlob).then((res) => {
                      resolve(res.downloadURL);
                    }).catch((err) => {
                        reject(err);
                    })
                  .catch((err) => {
                    reject(err);
                  })
                }
              })
            })
          })
      })
    })    
     return promise;   
  }

  guid() {
  function s4() {
    return Math.floor((1 + Math.random()) * 0x10000)
      .toString(16)
      .substring(1);
  }
  return s4() + s4() + '-' + s4() + '-' + s4() + '-' +
    s4() + '-' + s4() + s4() + s4();
}

}

import { Injectable } from '@angular/core';

import { File } from '@ionic-native/file';

import { FileChooser } from '@ionic-native/file-chooser';

import { FilePath } from '@ionic-native/file-path';

import firebase from 'firebase';

Generated class for the ImghandlerProvider provider.

See https://angular.io/docs/ts/latest/guide/dependency-injection.html

for more info on providers and Angular 2 DI.

@Injectable()

export class ImghandlerProvider {

nativepath: any;

firestore = firebase.storage();

constructor(public filechooser: FileChooser) {

}

For uploading an image to firebase storage.

Called from - profilepic.ts

Inputs - None.

Outputs - The image url of the stored image.

uploadimage() {

var promise = new Promise((resolve, reject) => {

this.filechooser.open().then((url) => {

(<any>window).FilePath.resolveNativePath(url, (result) => {

this.nativepath = result;

(<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {

res.file((resFile) => {

var reader = new FileReader();

reader.readAsArrayBuffer(resFile);

reader.onloadend = (evt: any) => {

var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg' });

var imageStore = this.firestore.ref('/profileimages').child(firebase.auth().currentUser.uid);

imageStore.put(imgBlob).then((res) => {

this.firestore.ref('/profileimages').child(firebase.auth().currentUser.uid).getDownloadURL().then((url) => {

resolve(url);

}).catch((err) => {

reject(err);

})

}).catch((err) => {

reject(err);

})

}

})

return promise;

}

picmsgstore() {

var promise = new Promise((resolve, reject) => {

this.filechooser.open().then((url) => {

(<any>window).FilePath.resolveNativePath(url, (result) => {

this.nativepath = result;

(<any>window).resolveLocalFileSystemURL(this.nativepath, (res) => {

res.file((resFile) => {

var reader = new FileReader();

reader.readAsArrayBuffer(resFile);

reader.onloadend = (evt: any) => {

var imgBlob = new Blob([evt.target.result], { type: 'image/jpeg' });

var uuid = this.guid();

var imageStore = this.firestore.ref('/picmsgs').child(firebase.auth().currentUser.uid).child('picmsg' + uuid);

imageStore.put(imgBlob).then((res) => {

resolve(res.downloadURL);

}).catch((err) => {

reject(err);

})

.catch((err) => {

reject(err);

})

}

})

return promise;

}

guid() {

function s4() {

return Math.floor((1 + Math.random()) * 0x10000)

.toString(16)

.substring(1);

}

return s4() + s4() + '-' + s4() + '-' + s4() + '-' +

s4() + '-' + s4() + s4() + s4();

}

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.

this.imgstore.picmsgstore().then((imgurl) => {
      loader.dismiss();
      this.chatservice.addnewmessage(imgurl).then(() => {
        this.scrollto();
        this.newmessage = '';
      })

this.imgstore.picmsgstore().then((imgurl) => {

loader.dismiss();

this.chatservice.addnewmessage(imgurl).then(() => {

this.scrollto();

this.newmessage = '';

})

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.

for (var key in this.allmessages) {
          if (this.allmessages[key].message.substring(0, 4) == 'http')
            this.imgornot.push(true);
          else
            this.imgornot.push(false);
        }

for (var key in this.allmessages) {

if (this.allmessages[key].message.substring(0, 4) == 'http')

this.imgornot.push(true);

else

this.imgornot.push(false);

}

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.

import { Component, ViewChild, NgZone } from '@angular/core';
import { IonicPage, NavController, NavParams, Events, Content, LoadingController } from 'ionic-angular';
import { ChatProvider } from '../../providers/chat/chat';
import { ImghandlerProvider } from '../../providers/imghandler/imghandler';
import firebase from 'firebase';
/**
 * Generated class for the BuddychatPage page.
 *
 * See http://ionicframework.com/docs/components/#navigation for more info
 * on Ionic pages and navigation.
 */
@IonicPage()
@Component({
  selector: 'page-buddychat',
  templateUrl: 'buddychat.html',
})
export class BuddychatPage {
  @ViewChild('content') content: Content;
  buddy: any;
  newmessage;
  allmessages = [];
  photoURL;
  imgornot;
  constructor(public navCtrl: NavController, public navParams: NavParams, public chatservice: ChatProvider,
    public events: Events, public zone: NgZone, public loadingCtrl: LoadingController,
    public imgstore: ImghandlerProvider) {
    this.buddy = this.chatservice.buddy;
    this.photoURL = firebase.auth().currentUser.photoURL;
    this.scrollto();
    this.events.subscribe('newmessage', () => {
      this.allmessages = [];
      this.imgornot = [];
      this.zone.run(() => {
        this.allmessages = this.chatservice.buddymessages;
        for (var key in this.allmessages) {
          if (this.allmessages[key].message.substring(0, 4) == 'http')
            this.imgornot.push(true);
          else
            this.imgornot.push(false);
        }
      })
      
      
    })
  }

  addmessage() {
    this.chatservice.addnewmessage(this.newmessage).then(() => {
      this.content.scrollToBottom();
      this.newmessage = '';
    })
  }

  ionViewDidEnter() {
    this.chatservice.getbuddymessages();
  }

  scrollto() {
    setTimeout(() => {
      this.content.scrollToBottom();
    }, 1000);
  }

  sendPicMsg() {
    let loader = this.loadingCtrl.create({
      content: 'Please wait'
    });
    loader.present();
    this.imgstore.picmsgstore().then((imgurl) => {
      loader.dismiss();
      this.chatservice.addnewmessage(imgurl).then(() => {
        this.scrollto();
        this.newmessage = '';
      })
    }).catch((err) => {
      alert(err);
      loader.dismiss();
    })
  }
}

import { Component, ViewChild, NgZone } from '@angular/core';

import { IonicPage, NavController, NavParams, Events, Content, LoadingController } from 'ionic-angular';

import { ChatProvider } from '../../providers/chat/chat';

import { ImghandlerProvider } from '../../providers/imghandler/imghandler';

import firebase from 'firebase';

/**

* Generated class for the BuddychatPage page.

* See http://ionicframework.com/docs/components/#navigation for more info

* on Ionic pages and navigation.

@IonicPage()

@Component({

selector: 'page-buddychat',

templateUrl: 'buddychat.html',

})

export class BuddychatPage {

@ViewChild('content') content: Content;

buddy: any;

newmessage;

allmessages = [];

photoURL;

imgornot;

constructor(public navCtrl: NavController, public navParams: NavParams, public chatservice: ChatProvider,

public events: Events, public zone: NgZone, public loadingCtrl: LoadingController,

public imgstore: ImghandlerProvider) {

this.buddy = this.chatservice.buddy;

this.photoURL = firebase.auth().currentUser.photoURL;

this.scrollto();

this.events.subscribe('newmessage', () => {

this.allmessages = [];

this.imgornot = [];

this.zone.run(() => {

this.allmessages = this.chatservice.buddymessages;

for (var key in this.allmessages) {

if (this.allmessages[key].message.substring(0, 4) == 'http')

this.imgornot.push(true);

else

this.imgornot.push(false);

}

})

}

addmessage() {

this.chatservice.addnewmessage(this.newmessage).then(() => {

this.content.scrollToBottom();

this.newmessage = '';

})

}

ionViewDidEnter() {

this.chatservice.getbuddymessages();

}

scrollto() {

setTimeout(() => {

this.content.scrollToBottom();

}, 1000);

}

sendPicMsg() {

let loader = this.loadingCtrl.create({

content: 'Please wait'

});

loader.present();

this.imgstore.picmsgstore().then((imgurl) => {

loader.dismiss();

this.chatservice.addnewmessage(imgurl).then(() => {

this.scrollto();

this.newmessage = '';

})

}).catch((err) => {

alert(err);

loader.dismiss();

})

}

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.

<!--
  Generated template for the BuddychatPage page.

  See http://ionicframework.com/docs/components/#navigation for more info on
  Ionic pages and navigation.
-->
<ion-header>

  <ion-navbar color="hcolor">
    <ion-title>{{buddy.displayName}}</ion-title>
    <ion-buttons end>
      <button ion-button (click)="sendPicMsg()">
      <ion-icon name="camera"></ion-icon>
      </button>
    </ion-buttons>
  </ion-navbar>

</ion-header>


<ion-content #content>
<div class = "chatwindow">
  <ion-list no-lines>
    <ion-item *ngFor = "let item of allmessages; let i = index" text-wrap>
      <ion-avatar item-left *ngIf="item.sentby === buddy.uid">
        <img src="{{buddy.photoURL}}">
      </ion-avatar>
      <div class="bubble me" *ngIf="item.sentby === buddy.uid">
        <h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
        <img src="{{item.message}}" *ngIf="imgornot[i]">
      </div>
      <ion-avatar item-right *ngIf="item.sentby != buddy.uid">
        <img src="{{photoURL}}">
      </ion-avatar>
      <div class="bubble you" *ngIf="item.sentby != buddy.uid">
        <h3 *ngIf="!imgornot[i]">{{item.message}}</h3>
        <img src="{{item.message}}" *ngIf="imgornot[i]">
      </div>
    </ion-item>
  </ion-list>
</div>
</ion-content>
<ion-footer ion-fixed>    
  <ion-toolbar class="no-border" color="white">        
    <ion-input [(ngModel)]="newmessage" placeholder="Write your message ..."></ion-input>  
    <ion-buttons end>
      <button ion-button (click)="addmessage()">
        <ion-icon name="send" color="primary"></ion-icon>
      </button>
    </ion-buttons>
  </ion-toolbar>    
</ion-footer>

<!--

Generated template for the BuddychatPage page.

See http://ionicframework.com/docs/components/#navigation for more info on

Ionic pages and navigation.

-->

<ion-header>

<ion-navbar color="hcolor">

<ion-title>{{buddy.displayName}}</ion-title>

<ion-buttons end>

<ion-icon name="camera"></ion-icon>

</button>

</ion-buttons>

</ion-navbar>

</ion-header>

<ion-content #content>

<ion-list no-lines>

<ion-item *ngFor = "let item of allmessages; let i = index" text-wrap>

<ion-avatar item-left *ngIf="item.sentby === buddy.uid">

</ion-avatar>

<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>

</div>

<ion-avatar item-right *ngIf="item.sentby != buddy.uid">

</ion-avatar>

<h3 *ngIf="!imgornot[i]">{{item.message}}</h3>

</div>

</ion-item>

</ion-list>

</div>

</ion-content>

<ion-footer ion-fixed>

<ion-toolbar class="no-border" color="white">

<ion-input [(ngModel)]="newmessage" placeholder="Write your message ..."></ion-input>

<ion-buttons end>

<ion-icon name="send" color="primary"></ion-icon>

</button>

</ion-buttons>

</ion-toolbar>

</ion-footer>

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.

Follow me

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

T-Pub :)

The Techies' pub

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

Read previous post:

Chat app with Ionic 3 & Firebase – Ep. 8 – One2One Chat