[WIP] Add cid image attachment support in template #10

README.md

@@ -57,6 +57,7 @@ or if you want to contribute see this READMEs:
   - HTML form are autogenerated by [JSON Schema](https://json-schema.org/)
   - User can preview the email or send email
 - Optionnaly record all email sent
+- [cid](https://nodemailer.com/message/embedded-images/) image attachment support
 
 
 ## This project is based on this stack

backend/src/app.js

@@ -87,6 +87,10 @@ function getHtml(templatePath, values) {
     );
 }
 
+function replaceAllCIDByPreviewUrl(data, ctx) {
+    return data.replace(/(['|"])cid:(.*)(['|"])/gi, `$1${ctx.siteUrl}/v1/templates/${ctx.params.name}/attachments/$2$3`);
+}
+
 function getTxt(templatePath, values) {
     return nunjucks.renderString(
         fs.readFileSync(
@@ -119,7 +123,10 @@ router.post('/v1/templates/:name/preview', (ctx) => {
     ctx.type = 'application/json';
     ctx.body = {
         'subject': getSubject(subjectTemplatePath, ctx.request.body),
-        'html': getHtml(mjmlTemplatePath, ctx.request.body),
+        'html': replaceAllCIDByPreviewUrl(
+            getHtml(mjmlTemplatePath, ctx.request.body),
+            ctx
+        ),
         'txt': getTxt(txtTemplatePath, ctx.request.body)
     };
 });
@@ -146,15 +153,53 @@ router.post('/v1/templates/:name/send', async (ctx) => {
         to: ctx.request.body.to,
         subject: getSubject(subjectTemplatePath, ctx.request.body),
         html: getHtml(mjmlTemplatePath, ctx.request.body),
-        text: getTxt(txtTemplatePath, ctx.request.body)
+        text: getTxt(txtTemplatePath, ctx.request.body),
+        attachments: fs.readdirSync(
+            path.join(
+                ctx.templatePath,
+                ctx.params.name,
+                'attachments'
+            )
+        ).map((filename) => {
+            return {
+                filename: filename,
+                path: path.join(
+                    ctx.templatePath,
+                    ctx.params.name,
+                    'attachments',
+                    filename
+                ),
+                cid: filename,
+                encoding: 'base64'
+            };
+        })
     });
     ctx.body = { result: result };
 });
 
-module.exports = function createApp(port, templatePath, staticPath, smtpUrl) {
+router.get('/v1/templates/:name/attachments/:filename', async (ctx) => {
+    console.log('attachments');
+    const attachmentFilePath = path.join(
+        ctx.templatePath,
+        ctx.params.name,
+        'attachments',
+        ctx.params.filename
+    );
+    if (!fs.existsSync(attachmentFilePath)) {
+        ctx.status = 404;
+        ctx.body = `${ctx.params.name}/attachments/${ctx.params.filename} file not exists`;
+        return;
+    }
+
+    ctx.attachment(ctx.params.filename);
+    ctx.body = fs.createReadStream(attachmentFilePath);
+});
+
+module.exports = function createApp(port, templatePath, staticPath, smtpUrl, siteUrl) {
     const app = new Koa();
     app.context.port = port;
     app.context.templatePath = templatePath;
+    app.context.siteUrl = siteUrl;
 
     if (smtpUrl === undefined) {
         app.context.transporter = nodemailer.createTransport({

backend/src/server.js

@@ -6,7 +6,8 @@ const app = createApp(
     PORT,
     process.env.TEMPLATES_PATH || '../mail-templates/',
     process.env.STATIC_PATH || undefined,
-    process.env.SMTP_URL || undefined
+    process.env.SMTP_URL || undefined,
+    process.env.SITE_URL || `http://127.0.0.1:${PORT}`
 );
 
 const server = app.listen(PORT, () => {

backend/src/swagger.yaml

@@ -130,3 +130,25 @@ paths:
             application/json:
               schema: 
                 type: object
+
+  /v1/templates/{name}/attachments/{filename}:
+    get:
+      summary: "Get template attachment files"
+      parameters:
+        - in: path
+          name: name
+          schema:
+            type: string
+          required: true
+          description: Template name
+        - in: path
+          name: filename
+          schema:
+            type: string
+          required: true
+          description: Attachment filename
+      responses:
+        '200':
+          description: File content
+          content:
+            application/x-binary

mail-templates/confirm_email/default.mjml

@@ -2,11 +2,15 @@
   <mj-body>
     <mj-section background-color="white">
       <mj-column>
-        <mj-text>    
+        <mj-text>
           <p>Hi {{ username }}!</p>
 
           <p>Thanks for signing up for {{ application_name }}!</p>
+        </mj-text>
+
+        <mj-image width="100px" src="cid:gibbon.png" />
 
+        <mj-text>
           <p>Please confirm your email ({{ confirm_email|safe }}) by clicking the link below:</p>
         </mj-text>
 
@@ -17,7 +21,7 @@
             color="white"
             >Confirm</mj-button>
 
-        <mj-text>    
+        <mj-text>
           <p>This link will expire in 48 hours.</p>
 
 {% if is_new_user %}