How to deliver email attachments to message on NodeJs using Express, Jade, Imap

I'm currently developing email client to our NodeJs application.

I got everything working, (List messages, open message etc..), except attachments.

How I should deliver attachments to page so 'cid:someId' source will render it to correct place.

I tried to google how to work with cid sources without understanding how to use them.

I can see message attachments on NodeJs like this:

attachments: [  
    {   
        contentType: 'image/jpg',
        filename: "somePicture.jpg",    
        contents: ""                  //BASE64 string
        cid: 'someId'
    }   
]

mailer.js

var Mailer = function() {
     this.getMessages = function(cb) {

         ------ IMAP MESSAGES READ ------
             cb(messages);
         ------ IMAP MESSAGES READ ------

     };
     this.getMessage = function(seqNo, cb) {

         ------ IMAP MESSAGE READ ------
             cb(messages);
         ------ IMAP MESSAGE READ ------

     };
};

module.exports = new Mailer();

router.js

var mailer = require('./mailer');

app.get('/mailer', function(req, res) {
    var data = { title: 'Mailer' };
    mailer.getMessages(function(messages) {
        data.messages = messages;
        res.render('index', data);
    });
});

app.get('/message/:seqNo', function(req, res) {
    mailer.getMessage(req.param.seqNo, function(message) {
        res.render('message', {message: message);
    });
});

index.jade

html
    head
        script(type='text/javascript', src='main.js')
    body
        div
            each message in messages
               div(id=message.seqNo)
                   header
                       p= message.from
                       p= message.to
                       p= message.subject
                   div.content
                       p= message.message

message.jade

 !{message.html}

Produces something like:

<html>
    <head>
    </head>
    <body>
        --- some content ---
        <img src='cid:someId' />
        --- some content ---
    </body>
</html>

Developer tool on Chrome, I see cid: Request

Name cid:someid
Method GET
Status (failed)
Initiator (index):1
Size 0 B
Time 2ms

And header show

General
  Request URL: cid:someId

Request Headers
  Provisional headers are shown
  Accept:image/webp,image/*,*/*;q=0.8
  Referer:http://localhost:5000/
  User-Agent:Mozilla/5.0 (Windows NT 10.0; WOW64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/48.0.2564.116 Safari/537.36

Solution

Looks like you're making a direct request to cid:someId without the server or browser knowing what to do with that protocol.

If all you need is rendering, you could parse the message and inject the content before you serve it. For example:

var message = "<img src='panda.jpg' /><img src='cid:someId' />";

function fetchContent(cid) {
  // Lookup goes here
  // return actual content url or base64 content, which will render
  return '/pictures/dog.png';
}
var result = message.replace(/('|")(cid:.*?)('|")/g, fetchContent('$1'));

which will return

<img src='panda.jpg' /><img src=/pictures/dog.png />