Sending Emails with Image Attachments in Ionic

ionic-email-attachment-header

Recently one of the students of the Ionic Academy had the problem to send out emails from his app with attachments, especially images.

The Ionic Academy

More content, more detailed video courses and community help inside the member area.

Not an Ionic Academy Member? Click here to learn more

In this Quick Win we will use the Ionic Native plugin for opening the native email client and also attach captured images to our email!

Starting a new App with Email Plugin

We start with a blank new Ionic app and install the email composer plugin from Ionic Native which is currently still marked as beta but has worked fine for me so far.

We also install the camera plugin as we first want to take an image and then attach it to our email, so go ahead and run:

The last command was currently needed some times on my machine, if you encounter Ionic Native errors give it a try.

Next we need to make sure that we import all of our plugins into our providers array inside src/app/app.moduel.ts so go ahead and add them now:

There’s nothing more you need to import right now!

Capture Image & Add as Attachment to Email

Our view will be very simple, we only need 2 buttons to call both of our functions and a place to display our current image.

Go ahead and change your src/pages/home/home.html to:

The last missing part is now the actual implementation of capturing images and creating emails.

To use an image, we define the source type to be the library in this example and also the destination to be file uri which will retunr us a path to the image. You can check out this complete image guide for more information on capturing and working with images!

Once we got the data, we assign it to our local variable currentImage which will show it inside our view then.

If we now want to send an email, we first have to create an object of different properties. You can find everything you can define for the email on the Cordova email plugin repository.

In our case we stuff like the email, a CC email and of course our current image, very simply just inside the array of attachments!

You can then also create a special body which will prefill the email. Once you are done, make sure to call open() on the emailComposer.

Now change your src/pages/home/home.ts to:

Note that you can’t test this functionality inside the browser, you need a simulator or device and of course an email account on that device.

If you capture and image or pick one from your library you should see it in the card below the buttons like in the image below.

email-attachement-image-capture

Once you hit send your native email client will appear and prefill your email with all the values you have specified for your email. In my case it would look like this:

email-attachment-open-mail

Implementing email attachments and creating your own predefined emails with Ionic is really super easy if you know how to. Besides installing and adding the plugin there is nothing were you could really go wrong.

The only thing you might want to add is an additional check whether the email account/ client is available, but you can do this as well with the Ionic Native email composer plugin!

You can find a video version of this article below.

  • jaime

    Y para enviar el correo directamente si pasar por gmail??