Multipart encodings

• Specifies a boundary delimiter in the header, and uses this to separate the various parts.
• Each part can have its own headers and encoding.
• Can be nested.

Web

• HTML forms submit data in either
  • application/x-www-form-urlencoded: like URL encoded get parameters. can't handle file inputs
  • multipart/form-data: supports binary file data.
  • multipart/mixed is deprecated for form-data
• FormData JavaScript objects can be manually constructed, or constructed from a form.
  • Files/binary are saved as File or Blob objects.
  • Fetch and xhr support submitting form data. These are always automatically serialized using multipart form data.
  • Submitting such a form data object over a fetch call will automatically set the proper content type headers. Make sure not to set these yourself or else that will break prevent the automatic setting.
• Blob: how binary data is represented in (browser) JavaScript
  • File objects inherit/extend from Blob objects.
  • The node equivalent to Blob is Buffer.
  • Since node 16, can use Blob. Node is trying to align with web.

Emails

• multipart/alternative is used in emails to encode both a text and HTML version for an email message.
• multipart/mixed is used to add attachments to email.
• multipart/related requires a type parameter identifying the primary part of the document. It's far more commonly used for HTML email or offline archives, where images etc. are included as related parts.

If your requirement is an email with:

1. text and html versions
2. html version has embedded (inline) images
3. attachments

The only structure I found that works with Gmail/Outlook/iPad is:

• mixed
  • alternative
    • text
    • related
      • html
      • inline image
      • inline image
  • attachment
  • attachment

(source)