Files can be added to templates and managed in a dedicated "Files" view.

Mosaico integration in progress. The files seem to be working for Mosaico.

routes/mosaico.js

@@ -4,16 +4,139 @@ const config = require('config');
 const router = require('../lib/router-async').create();
 const passport = require('../lib/passport');
 const clientHelpers = require('../lib/client-helpers');
+const gm = require('gm').subClass({
+    imageMagick: true
+});
 
 const bluebird = require('bluebird');
 const fsReadFile = bluebird.promisify(require('fs').readFile);
 
 const path = require('path');
 
+const files = require('../models/files');
+const fileHelpers = require('../lib/file-helpers');
+
 // FIXME - add authentication by sandboxToken
 
+async function placeholderImage(width, height) {
+    const magick = gm(width, height, '#707070');
+    const streamAsync = bluebird.promisify(magick.stream.bind(magick));
 
-router.getAsync('/editor', passport.csrfProtection, async (req, res) => {
+    const size = 40;
+    let x = 0;
+    let y = 0;
+
+    // stripes
+    while (y < height) {
+        magick
+            .fill('#808080')
+            .drawPolygon([x, y], [x + size, y], [x + size * 2, y + size], [x + size * 2, y + size * 2])
+            .drawPolygon([x, y + size], [x + size, y + size * 2], [x, y + size * 2]);
+        x = x + size * 2;
+        if (x > width) {
+            x = 0;
+            y = y + size * 2;
+        }
+    }
+
+    // text
+    magick
+        .fill('#B0B0B0')
+        .fontSize(20)
+        .drawText(0, 0, width + ' x ' + height, 'center');
+
+    const stream = await streamAsync('png');
+
+    return {
+        format: 'png',
+        stream
+    };
+}
+
+async function resizedImage(src, method, width, height) {
+    const filePath = path.join(__dirname, '..', src);
+
+    const magick = gm(filePath);
+    const streamAsync = bluebird.promisify(magick.stream.bind(magick));
+    const formatAsync = bluebird.promisify(magick.format.bind(magick));
+
+    const format = (await formatAsync()).toLowerCase();
+
+    if (method === 'resize') {
+        magick
+            .autoOrient()
+            .resize(width, height);
+    } else if (method === 'cover') {
+        magick
+            .autoOrient()
+            .resize(width, height + '^')
+            .gravity('Center')
+            .extent(width, height + '>');
+    } else {
+        throw new Error(`Method ${method} not supported`);
+    }
+
+    const stream = await streamAsync();
+
+    return {
+        format,
+        stream
+    };
+}
+
+function sanitizeSize(val, min, max, defaultVal, allowNull) {
+    if (val === 'null' && allowNull) {
+        return null;
+    }
+    val = Number(val) || defaultVal;
+    val = Math.max(min, val);
+    val = Math.min(max, val);
+    return val;
+}
+
+router.getAsync('/img/:type/:fileId', passport.loggedIn, async (req, res) => {
+    const method = req.query.method;
+    const params = req.query.params;
+    let [width, height] = params.split(',');
+    let image;
+
+    if (method === 'placeholder') {
+        width = sanitizeSize(width, 1, 2048, 600, false);
+        height = sanitizeSize(height, 1, 2048, 300, false);
+        image = await placeholderImage(width, height);
+    } else {
+        width = sanitizeSize(width, 1, 2048, 600, false);
+        height = sanitizeSize(height, 1, 2048, 300, true);
+        image = await resizedImage(req.query.src, method, width, height);
+    }
+
+    res.set('Content-Type', 'image/' + image.format);
+    image.stream.pipe(res);
+});
+
+
+fileHelpers.installUploadHandler(router, '/upload/:type/:entityId', true);
+
+router.getAsync('/upload/:type/:fileId', passport.loggedIn, async (req, res) => {
+    const entries = await files.list(req.context, req.params.type, req.params.fileId);
+
+    const filesOut = [];
+    for (const entry of entries) {
+        filesOut.push({
+            name: entry.originalname,
+            url: `/files/${req.params.type}/${req.params.fileId}/${entry.filename}`,
+            size: entry.size,
+            thumbnailUrl: `/files/${req.params.type}/${req.params.fileId}/${entry.filename}` // TODO - use smaller thumbnails
+        })
+    }
+
+    res.json({
+        files: filesOut
+    });
+});
+
+
+router.getAsync('/editor', passport.csrfProtection, passport.loggedIn, async (req, res) => {
     const resourceType = req.query.type;
     const resourceId = req.query.id;
 
@@ -29,15 +152,6 @@ router.getAsync('/editor', passport.csrfProtection, async (req, res) => {
         }
     }
 
-    /* ????
-        resource.editorName = resource.editorName ||  'mosaico';
-        resource.editorData = !resource.editorData ?
-            {
-                template: req.query.template || 'versafix-1'
-            } :
-            JSON.parse(resource.editorData);
-    */
-
     res.render('mosaico/root', {
         layout: 'mosaico/layout',
         editorConfig: config.mosaico,
@@ -47,4 +161,5 @@ router.getAsync('/editor', passport.csrfProtection, async (req, res) => {
     });
 });
 
+
 module.exports = router;