ref: Collapse image data into one column

client/src/components/CardModal/Attachments/Attachments.jsx

@@ -57,11 +57,8 @@ const Attachments = React.memo(
     }, [toggleAllVisible]);
 
     const galleryItemsNode = items.map((item, index) => {
-      const props = item.coverUrl
+      const props = item.image
-        ? {
+        ? item.image
-            width: item.imageWidth,
-            height: item.imageHeight,
-          }
         : {
             content: (
               <Grid verticalAlign="middle" className={styles.contentWrapper}>
@@ -91,7 +88,7 @@ const Attachments = React.memo(
                 createdAt={item.createdAt}
                 isCover={item.isCover}
                 isPersisted={item.isPersisted}
-                onClick={item.coverUrl ? open : undefined}
+                onClick={item.image ? open : undefined}
                 onCoverSelect={() => handleCoverSelect(item.id)}
                 onCoverDeselect={handleCoverDeselect}
                 onUpdate={(data) => handleUpdate(item.id, data)}

client/src/models/Attachment.js

@@ -9,6 +9,7 @@ export default class extends Model {
     id: attr(),
     url: attr(),
     coverUrl: attr(),
+    image: attr(),
     name: attr(),
     cardId: fk({
       to: 'Card',

server/api/controllers/attachments/create.js

@@ -54,10 +54,8 @@ module.exports = {
 
         const attachment = await sails.helpers.attachments.createOne(
           {
-            dirname: file.extra.dirname,
+            ...file.extra,
             filename: file.filename,
-            isImage: file.extra.isImage,
-            name: file.extra.name,
           },
           currentUser,
           card,

server/api/controllers/attachments/download-thumbnail.js

@@ -46,7 +46,7 @@ module.exports = {
       }
     }
 
-    if (!attachment.isImage) {
+    if (!attachment.image) {
       throw Errors.ATTACHMENT_NOT_FOUND;
     }
 

server/api/controllers/attachments/download.js

@@ -53,7 +53,7 @@ module.exports = {
     }
 
     this.res.type(attachment.filename);
-    if (!attachment.isImage && path.extname(attachment.filename) !== '.pdf') {
+    if (!attachment.image && path.extname(attachment.filename) !== '.pdf') {
       this.res.set('Content-Disposition', 'attachment');
     }
     this.res.set('Cache-Control', 'private, max-age=900'); // TODO: move to config

server/api/helpers/attachments/create-one.js

@@ -38,7 +38,7 @@ module.exports = {
       inputs.request,
     );
 
-    if (!inputs.card.coverAttachmentId && attachment.isImage) {
+    if (!inputs.card.coverAttachmentId && attachment.image) {
       await sails.helpers.cards.updateOne(inputs.card, {
         coverAttachmentId: attachment.id,
       });

server/api/helpers/utils/create-attachment-receiver.js

@@ -43,15 +43,20 @@ module.exports = {
         await writeFile(path.join(rootPath, filename), buffer);
 
         const image = sharp(buffer);
-        let imageMetadata;
+        let metadata;
 
         try {
-          imageMetadata = await image.metadata();
+          metadata = await image.metadata();
         } catch (error) {} // eslint-disable-line no-empty
 
-        if (imageMetadata) {
+        const extra = {
+          dirname,
+          name: file.filename,
+        };
+
+        if (metadata && !['svg', 'pdf'].includes(metadata.format)) {
           let cover256Buffer;
-          if (imageMetadata.height > imageMetadata.width) {
+          if (metadata.height > metadata.width) {
             cover256Buffer = await image
               .resize(256, 320)
               .jpeg({
@@ -75,17 +80,16 @@ module.exports = {
           fs.mkdirSync(thumbnailsPath);
 
           await writeFile(path.join(thumbnailsPath, 'cover-256.jpg'), cover256Buffer);
-        }
 
-        // eslint-disable-next-line no-param-reassign
+          extra.image = _.pick(metadata, ['width', 'height']);
-        file.extra = {
+        } else {
-          dirname,
+          extra.image = null;
-          isImage: !!imageMetadata,
+        }
-          name: file.filename,
-        };
 
-        // eslint-disable-next-line no-param-reassign
+        Object.assign(file, {
-        file.filename = filename;
+          filename,
+          extra,
+        });
 
         return done();
       } catch (error) {

server/api/models/Attachment.js

@@ -19,20 +19,8 @@ module.exports = {
       type: 'string',
       required: true,
     },
-    isImage: {
+    image: {
-      type: 'boolean',
+      type: 'json',
-      required: true,
-      columnName: 'is_image',
-    },
-    imageWidth: {
-      type: 'number',
-      allowNull: true,
-      columnName: 'image_width',
-    },
-    imageHeight: {
-      type: 'number',
-      allowNull: true,
-      columnName: 'image_height',
     },
     name: {
       type: 'string',
@@ -61,9 +49,9 @@ module.exports = {
 
   customToJSON() {
     return {
-      ..._.omit(this, ['dirname', 'filename', 'isImage']),
+      ..._.omit(this, ['dirname', 'filename']),
       url: `${sails.config.custom.attachmentsUrl}/${this.id}/download/${this.filename}`,
-      coverUrl: this.isImage
+      coverUrl: this.image
         ? `${sails.config.custom.attachmentsUrl}/${this.id}/download/thumbnails/cover-256.jpg`
         : null,
     };

server/db/migrations/20220523131229_add_image_sizes_to_attachment_table.js

@@ -1,45 +0,0 @@
-const path = require('path');
-const sharp = require('sharp');
-
-const getConfig = require('../../get-config');
-
-module.exports.up = async (knex) => {
-  await knex.schema.table('attachment', (table) => {
-    /* Columns */
-
-    table.integer('image_width');
-    table.integer('image_height');
-  });
-
-  const config = await getConfig();
-  const attachments = await knex('attachment');
-
-  // eslint-disable-next-line no-restricted-syntax
-  for (attachment of attachments) {
-    if (attachment.is_image) {
-      const image = sharp(
-        path.join(config.custom.attachmentsPath, attachment.dirname, attachment.filename),
-      );
-
-      let metadata;
-      try {
-        metadata = await image.metadata(); // eslint-disable-line no-await-in-loop
-      } catch (error) {
-        continue; // eslint-disable-line no-continue
-      }
-
-      // eslint-disable-next-line no-await-in-loop
-      await knex('attachment')
-        .update({
-          image_width: metadata.width,
-          image_height: metadata.height,
-        })
-        .where('id', attachment.id);
-    }
-  }
-};
-
-module.exports.down = (knex) =>
-  knex.schema.table('attachment', (table) => {
-    table.dropColumns('image_width', 'image_height');
-  });

server/db/migrations/20220523131229_add_image_to_attachment_table.js

@@ -0,0 +1,73 @@
+const path = require('path');
+const sharp = require('sharp');
+const _ = require('lodash');
+
+const getConfig = require('../../get-config');
+
+module.exports.up = async (knex) => {
+  await knex.schema.table('attachment', (table) => {
+    /* Columns */
+
+    table.jsonb('image');
+  });
+
+  const config = await getConfig();
+  const attachments = await knex('attachment');
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (attachment of attachments) {
+    if (attachment.is_image) {
+      const image = sharp(
+        path.join(config.custom.attachmentsPath, attachment.dirname, attachment.filename),
+      );
+
+      let metadata;
+      try {
+        metadata = await image.metadata(); // eslint-disable-line no-await-in-loop
+      } catch (error) {
+        continue; // eslint-disable-line no-continue
+      }
+
+      if (!['svg', 'pdf'].includes(metadata.format)) {
+        // eslint-disable-next-line no-await-in-loop
+        await knex('attachment')
+          .update({
+            image: _.pick(metadata, ['width', 'height']),
+          })
+          .where('id', attachment.id);
+      }
+    }
+  }
+
+  return knex.schema.table('attachment', (table) => {
+    table.dropColumn('is_image');
+  });
+};
+
+module.exports.down = async (knex) => {
+  await knex.schema.table('attachment', (table) => {
+    /* Columns */
+
+    table.boolean('is_image');
+  });
+
+  const attachments = await knex('attachment');
+
+  // eslint-disable-next-line no-restricted-syntax
+  for (attachment of attachments) {
+    // eslint-disable-next-line no-await-in-loop
+    await knex('attachment')
+      .update({
+        is_image: !!attachment.image,
+      })
+      .where('id', attachment.id);
+  }
+
+  await knex.schema.table('attachment', (table) => {
+    table.dropColumn('image');
+  });
+
+  return knex.schema.alterTable('attachment', (table) => {
+    table.boolean('is_image').notNullable().alter();
+  });
+};