Add thumbnail on upload and handle deletion

Signed-off-by: Alexandre Bodin <bodin.alex@gmail.com>

packages/strapi-plugin-upload/models/File.settings.json

@@ -29,6 +29,10 @@
       "type": "integer",
       "configurable": false
     },
+    "thumbnail": {
+      "type": "json",
+      "configurable": false
+    },
     "hash": {
       "type": "string",
       "configurable": false,

packages/strapi-plugin-upload/services/Upload.js

@@ -20,16 +20,6 @@ const generateFileName = name => {
   return `${baseName}_${randomSuffix()}`;
 };
 
-const sharp = require('sharp');
-
-console.log(sharp.format);
-
-const getDimensions = buffer =>
-  sharp(buffer)
-    .metadata()
-    .then(({ width, height }) => ({ width, height }));
-// .catch()
-
 module.exports = {
   formatFileInfo({ filename, type, size }, fileInfo = {}, metas = {}) {
     const ext = path.extname(filename);
@@ -108,9 +98,22 @@ module.exports = {
 
   async uploadFileAndPersist(fileData) {
     const config = strapi.plugins.upload.config;
+
+    const { getDimensions, generateThumbnail } = strapi.plugins.upload.services[
+      'image-manipulation'
+    ];
+
     await strapi.plugins.upload.provider.upload(fileData);
 
+    const thumbnailFile = await generateThumbnail(fileData);
+    if (thumbnailFile) {
+      await strapi.plugins.upload.provider.upload(thumbnailFile);
+      delete thumbnailFile.buffer;
+      fileData.thumbnail = thumbnailFile;
+    }
+
     const { width, height } = await getDimensions(fileData.buffer);
+
     delete fileData.buffer;
 
     _.assign(fileData, {
@@ -187,6 +190,10 @@ module.exports = {
     // execute delete function of the provider
     if (file.provider === config.provider) {
       await strapi.plugins.upload.provider.delete(file);
+
+      if (file.thumbnail !== null) {
+        await strapi.plugins.upload.provider.delete(file.thumbnail);
+      }
     }
 
     const media = await strapi.query('file', 'upload').findOne({

packages/strapi-plugin-upload/services/image-manipulation.js

@@ -0,0 +1,45 @@
+'use strict';
+/**
+ * Image manipulation functions
+ */
+
+const sharp = require('sharp');
+
+const getDimensions = buffer =>
+  sharp(buffer)
+    .metadata()
+    .then(({ width, height }) => ({ width, height }))
+    .catch(err => {
+      // ignore invali formats
+      console.log(err);
+      return {};
+    });
+
+const ThUMBNAIL_RESIZE_OPTIONS = {
+  width: 245,
+  height: 156,
+  fit: 'inside',
+};
+
+const generateThumbnail = file => {
+  return sharp(file.buffer)
+    .resize(ThUMBNAIL_RESIZE_OPTIONS)
+    .toBuffer()
+    .then(buffer => {
+      return getDimensions(buffer).then(dimensions => ({
+        ...dimensions,
+        hash: `thumb_${file.hash}`,
+        ext: file.ext,
+        buffer,
+      }));
+    })
+    .catch(err => {
+      console.log(err);
+      return null;
+    });
+};
+
+module.exports = {
+  getDimensions,
+  generateThumbnail,
+};

packages/strapi-provider-upload-cloudinary/lib/index.js

@@ -16,7 +16,7 @@ module.exports = {
       upload(file, customConfig = {}) {
         return new Promise((resolve, reject) => {
           const upload_stream = cloudinary.uploader.upload_stream(
-            { resource_type: 'auto', ...customConfig },
+            { resource_type: 'auto', public_id: file.hash, ...customConfig },
             (err, image) => {
               if (err) {
                 return reject(err);