iOS

iOS Programming 101: How To Create Email with Attachment


A year ago, we wrote a short tutorial to show you how to send email using MessageUI framework. Some asked how to attach a photo, PDF document or Powerpoint in the email. Instead of replying every email individually, we think it’s better to write another short how-to tutorial.

The MessageUI framework has made it really easy to send email in your apps. If you’ve read the official document of MessageUI framework, you know the MFMailComposeViewController class already provides a method called “addAttachmentData:” to add any types of files as an attachment. In this short tutorial, like other articles of our iOS Programming 101 series, we’ll write a simple app and demonstrate the usage of the method.

Email Attachment Featured

A Glance at the Demo App

As the primary focus is to demonstrate the attachment usage, we keep the demo app very simple. The app simply displays a list of files in a plain table view. We’ll populate the table with various types of files including image in both PNG and JPEG format, Microsoft Word document, Powerpoint, PDF document and HTML file. Whenever users tap on any of the file, the app automatically creates an email with the selected file as an attachment.

Email Attachment Demo App

Demo App for email attachment

Start with the Xcode Project Template

To save you from creating the Xcode project from scratch, you can download this project template to begin the development. The project template comes with:

  • A pre-built storyboard with a table view controller for displaying the list of files
  • An AttachmentTableViewController class
  • A set of files that are used as attachment
  • A set of free icons from Pixeden
Email Attachment Demo App Template

Xcode Project Template with a pre-built Storyboard

After downloading and extracting the zipped file, you can compile and run the project. The demo app should display a list of files in the main view. Now, we’ll continue to implement the email function.

Creating Email using MessageUI Framework

First, add the import statement and implement the “MFMailComposeViewControllerDelegate” in “AttachmentTableViewController.m”:

Next, add the following code in the same file:

We won’t go into the details of “didFinishWithResult:” method, which is a method of the MFMailComposeViewControllerDelegate protocol that have to be implemented. You can check out this tutorial for further explanation.

Okay, let’s go through the “showEmail” method. Line 3-5 of the above code define the email subject, message content and recipients. Line 7 creates the built-in MFMailComposeViewController, which provides the standard user interface for managing the editing and sending of an email message. We populate the fields of that view with initial values including the recipient email, subject and body text.

To add an attachment, all we have to do is to call up the “addAttachmentData” method of the MFMailComposeViewController.

The method takes in three parameters:

  • the data to attach – this is the contents of a file that you want to include.
  • the MIME type – MIME stands for Multipurpose Internet Mail Extensions. In short, MIME is an Internet standard that defines the way for sending other kinds of information (e.g. graphic) in email. Here the MIME type specifies the type of data to attach. For instance, the MIME type of a PNG image is image/png. You can refer to full list of MIME types at http://www.iana.org/assignments/media-types/.
  • the file name – that’s the preferred file name to associate the attachment.

Apparently, line 13-36 of the above are used to determine the content of these parameters. We first determine the file path and create a NSData object for that file, followed by nailing down the MIME type. Lastly, we invoke the addAttachmentData method to attach the file.

We’re almost done. The last thing is changed the “didSelectRowAtIndexPath” method with the following code:

Compile and Run the App

You’re good to go. Compile and run the app. Pick any files and you’ll have an email with the corresponding attachment.

Email Attachment App Deliverable

For your complete reference, you can download the full source from here. As always, leave us comment and share your thought about the tutorial. If you have any suggestion for the iOS Programming 101 series, feel free to let us know.

SwiftUI
How to Use ShareLink for Sharing Data Like Text and Photos
Tutorial
Debugging Out of Memory Issues: Catching Layout Feedback Loop with the Runtime Magic
SwiftUI
How to Hide Disclosure Indicator in SwiftUI List
Shares