22

What is the correct way to create a HTML-Email with inline attachments and non-inline attachments?

In addition please tell me what Content-Type to use with only inline attachments and with only non-inline attachments.

Until now i did it like this:

MIME-Version: 1.0
[some more headers]
Content-type: multipart/mixed;
 boundary="myboundary"
--myboundary
Content-Type: text/html; charset=ISO-8859-15
Content-Transfer-Encoding: 7bit

[html with img cid:my_image]

--myboundary
Content-Type: image/png;  name="my_image.png"
Content-Transfer-Encoding: base64
Content-ID: <my_image>
Content-Disposition: inline;  filename="my_image.png"

[base64 image data]

--myboundary
Content-type: application/pdf;  name="my_pdf.pdf"
Content-length: 1150
Content-Transfer-Encoding: base64
Content-ID: <my_pdf.pdf>
Content-Disposition: attachment;  filename="my_pdf.pdf"

[base64 pdf data]

--myboundary--

The mail looks good in outlook. But I noticed that Thunderbird did not display my inline image and shows 2 attachments instead (My image and my PDF). So I did some debugging and noticed that inline images should be sent via Content-Type: multipart/related.

So I changed Content-Type: multipart/mixed to Content-Type: multipart/related and Thunderbird displayed it correct: The image is shown in html and one attachment, the PDF is shown.

I am not sure if this is the correct solution although it seems to work. Is it correct to use multipart/related always (in case if i have inline and non-inline attachments, in case if i have only inline attachments and in case if i have only non-inline attachments)?

Or is the correct way to use one boundary of type related to split the inline attachments and one other boundary of type mixed to split the non-inline attachments?

I hope you can provide me a sample for

  1. Email with inline only attachments
  2. Email with non-inline only attachments
  3. Email with inline and non-inline attachments
Jorge Orpinel Pérez
  • 6,361
  • 1
  • 21
  • 38
steven
  • 4,868
  • 2
  • 28
  • 58
  • I wrote an answer with to a similar question and created an ascii art to explain the answert: http://stackoverflow.com/a/40420648/633961 – guettli Nov 09 '16 at 08:48

1 Answers1

40

Images

Yes, it is correct approach to use multipart/related content type. Here is an example (please note 'Content-Type' and 'Content-Disposition' values):

enter image description here

Example source and detailed info

Here are samples you've requested:

  1. Email with inline only attachments
  2. Email with non-inline only attachments
  3. Email with inline and non-inline attachments

Sample 1: inline only

enter image description here

Subject: Test 01: inline only
To: Renat Gilmanov
Content-Type: multipart/related; boundary=089e0149bb0ea4e55c051712afb5

--089e0149bb0ea4e55c051712afb5
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. P=
ellentesque odio urna, bibendum eu ultricies in, dignissim in magna. Vivamu=
s risus justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urn=
a id pulvinar.<br><br><img src=3D"cid:ii_ia6yo3z92_14d962f8450cc6f1" height=
=3D"218" width=3D"320"><br>=E2=80=8B<br>Cras eu velit ac purus feugiat impe=
rdiet nec sit amet ipsum. Praesent gravida lobortis justo, nec tristique ve=
lit sagittis finibus. Suspendisse porta ante id diam varius, in cursus ante=
 luctus. Aenean a mollis mi. Pellentesque accumsan lacus sed erat vulputate=
, et semper tellus condimentum.<br><br>Best regards<br></div>

--089e0149bb0ea4e55c051712afb5
Content-Type: image/png; name="test-01.png"
Content-Disposition: inline; filename="test-01.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_ia6yo3z92_14d962f8450cc6f1>
X-Attachment-Id: ii_ia6yo3z92_14d962f8450cc6f1

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
QCDLAIEsAwSyDBDIMkAgywCBLAMEsgwQyDJAIMsAgSwDBLIMEMgyQCDLAIEsAwSyDBDIMkAg6wK+
4gU280YtuwAAAABJRU5ErkJggg==
--089e0149bb0ea4e55c051712afb5--

Sample 2: only attachments

enter image description here

Subject: Test 02: only attachments
To: Renat Gilmanov 
Content-Type: multipart/mixed; boundary=047d7b41cc5c82ae5d051712c40c

--047d7b41cc5c82ae5d051712c40c
Content-Type: text/plain; charset=UTF-8

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Pellentesque
odio urna, bibendum eu ultricies in, dignissim in magna. Vivamus risus
justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urna
id pulvinar.

Cras eu velit ac purus feugiat imperdiet nec sit amet ipsum. Praesent
gravida lobortis justo, nec tristique velit sagittis finibus.
Suspendisse porta ante id diam varius, in cursus ante luctus. Aenean a
mollis mi. Pellentesque accumsan lacus sed erat vulputate, et semper
tellus condimentum.

Best regards

--047d7b41cc5c82ae5d051712c40c
Content-Type: image/png; name="test-02.png"
Content-Disposition: attachment; filename="test-02.png"
Content-Transfer-Encoding: base64
X-Attachment-Id: f_ia6yvl4b0

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
gECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBA1gWV
ywTWDU1tpwAAAABJRU5ErkJggg==
--047d7b41cc5c82ae5d051712c40c--

Sample 3: inline and attachments

enter image description here

Subject: Test 03: inline and attachments
To: Renat Gilmanov
Content-Type: multipart/mixed; boundary=001a11c24d809f1525051712cc78

--001a11c24d809f1525051712cc78
Content-Type: multipart/related; boundary=001a11c24d809f1523051712cc77

--001a11c24d809f1523051712cc77
Content-Type: text/html; charset=UTF-8
Content-Transfer-Encoding: quoted-printable

<div dir=3D"ltr">Lorem ipsum dolor sit amet, consectetur adipiscing elit. P=
ellentesque odio urna, bibendum eu ultricies in, dignissim in magna. Vivamu=
s risus justo, viverra sed dapibus eu, laoreet eget erat. Sed pretium a urn=
a id pulvinar.<br><br><img src=3D"cid:ii_ia6yyemg0_14d9636d8ac7a587" height=
=3D"218" width=3D"320"><br>=E2=80=8B<br>Cras eu velit ac purus feugiat impe=
rdiet nec sit amet ipsum. Praesent gravida lobortis justo, nec tristique ve=
lit sagittis finibus. Suspendisse porta ante id diam varius, in cursus ante=
 luctus. Aenean a mollis mi. Pellentesque accumsan lacus sed erat vulputate=
, et semper tellus condimentum.<br><br>Best regards</div>

--001a11c24d809f1523051712cc77
Content-Type: image/png; name="test-01.png"
Content-Disposition: inline; filename="test-01.png"
Content-Transfer-Encoding: base64
Content-ID: <ii_ia6yyemg0_14d9636d8ac7a587>
X-Attachment-Id: ii_ia6yyemg0_14d9636d8ac7a587

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
QCDLAIEsAwSyDBDIMkAgywCBLAMEsgwQyDJAIMsAgSwDBLIMEMgyQCDLAIEsAwSyDBDIMkAg6wK+
4gU280YtuwAAAABJRU5ErkJggg==
--001a11c24d809f1523051712cc77--
--001a11c24d809f1525051712cc78
Content-Type: image/png; name="test-02.png"
Content-Disposition: attachment; filename="test-02.png"
Content-Transfer-Encoding: base64
X-Attachment-Id: f_ia6yymei1

iVBORw0KGgoAAAANSUhEUgAAAUAAAADaCAYAAADXGps7AAAABHNCSVQICAgIfAhkiAAAAAlwSFlz
AAALewAAC3sBSRnwgAAAABl0RVh0U29mdHdhcmUAd3d3Lmlua3NjYXBlLm9yZ5vuPBoAAALnSURB
...
gECWAQJZBghkGSCQZYBAlgECWQYIZBkgkGWAQJYBAlkGCGQZIJBlgECWAQJZBghkGSCQZYBA1gWV
ywTWDU1tpwAAAABJRU5ErkJggg==
--001a11c24d809f1525051712cc78--

Quick summary

  1. Inline only attachments: use multipart/related
  2. Non-inline only attachments: use multipart/mixed
  3. Inline and non-inline attachments use multipart/mixed and multipart/related

Update

Here is a very interesting article: Using Images in HTML Email

Renat Gilmanov
  • 17,735
  • 5
  • 39
  • 56
  • first thanks for your reply. Please correct me if I am wrong, what I understand from your answer is that in case of both: inline and non-inline attachments I have to use both, an `multipart/mixed` AND an `multipart/related` boundary. The mixed have the following parts: 1. The HTML-Mail including the related attachments and 2. The first non-inline attachment 3. The second non-inline attachment ... Part 1 is itself splitted by the related boundary. – steven May 27 '15 at 09:04
  • Maybe you should improve your answer a little bit. You can remove the part where you explain that pdf should sended via content-type application/pdf because it was not part of the question. The question was only about boundary content-types. And it would be nice to give three examples like your last sample instead: 1. inline image attachment only, 2. non-inline attachment only and 3. both, inline and non-inline attachment (this is what your sample shows, right now) but you can remove the `multipart/alternative` part because it was not part of the question. – steven May 27 '15 at 09:10
  • I will offer the +100 for your answer if you improve it a litte bit like i explained. I hope you confirm my intention to provide a sample for all three variants. So i hope to help to understand the boundary stuff which is not so easy to get by reading the RFCs. Thank you very much. – steven May 27 '15 at 09:16
  • Sure, it is quite easy to get additional examples. Will update the answer during the day. – Renat Gilmanov May 27 '15 at 09:53
  • @steven I've added all relevant examples, so everything looks better and way more clear right now :) – Renat Gilmanov May 27 '15 at 17:04
  • 1
    Thank you for the superb answer @RenatGilmanov! I'm having a similar issue with Mime types, in which I attempt to add an HTML part 'prefix' to the email's body, but some clients get empty body with no attachments, some get the body only in the attachments (empty body) (Outlook on Windows), and some work well (GMail web, Android App, etc.). Please take a look if possible: https://stackoverflow.com/questions/47312409/adding-an-html-prefix-to-email-mime-causes-some-clients-to-show-empty-body – shachar0n Nov 15 '17 at 16:25
  • multipart related: you're doing it it wrong: missing type parameter, so a compliant email client will probaly treat them all as multipart/mixed and thus bd required to ignore the content-disposition header. – Jasen Dec 14 '18 at 02:23