How to customize strapi image upload to use third party library for image compression?

I'm new to strapi, and im trying to find a way to compress image that is uploaded to strapi which will then be served to a static gatsby site. Is there any way i can do this? I found image-compressor.js npm library but i dont know how to integrate it into strapi both for the field in each content type and for the WYSWYG editor. Can someone please help me? If possible, can we customize the it on upload to Strapi based on the display size in gatsby?

1st attempt at integrating image-compressor:

Here's my upload.js:

const Compressor = require('image-compressor')
module.exports =
upload: async (ctx) =>
// Retrieve provider configuration.
const config = await strapi.store(
environment: strapi.config.environment,
type: 'plugin',
name: 'upload'
).get( key: 'provider' );

// Verify if the file upload is enable.
if (config.enabled === false)
strapi.log.error('File upload is disabled');
return ctx.badRequest(null, ctx.request.admin ? [ messages: [ id: 'Upload.status.disabled' ] ] : 'File upload is disabled');


// Extract optional relational data.
const refId, ref, source, field = ctx.request.body.fields;
let files = = ctx.request.body.files;

if (_.isEmpty(files))
return ctx.send(true);


//integrate image-compressor library to enhance uploaded image
var imageCompressor = new Compressor.ImageCompressor;

var compressorSettings =
toWidth : 100,
toHeight : 100,
mimeType : 'image/png',
mode : 'strict',
quality : 0.6,
grayScale : true,
sepia : true,
threshold : 127,
vReverse : true,
hReverse : true,
speed : 'low'
;

files.map(file => imageCompressor.run(file, compressorSettings), () => )

// Transform stream files to buffer
// const buffers = await strapi.plugins.upload.services.upload.bufferize(ctx.request.body.files.files);
const buffers = await strapi.plugins.upload.services.upload.bufferize(files.files);
const enhancedFiles = buffers.map(file =>
if (file.size > config.sizeLimit)
return ctx.badRequest(null, ctx.request.admin ? [ messages: [ id: 'Upload.status.sizeLimit', values: file: file.name ] ] : `$file.name file is bigger than limit size!`);


// Add details to the file to be able to create the relationships.
if (refId && ref && field)
Object.assign(file,
related: [
refId,
ref,
source,
field
]
);


return file;
);

// Something is wrong (size limit)...
if (ctx.status === 400)
return;


const uploadedFiles = await strapi.plugins.upload.services.upload.upload(enhancedFiles, config);

// Send 200 `ok`
ctx.send(uploadedFiles.map((file) =>
// If is local server upload, add backend host as prefix
if (file.url && file.url[0] === '/')
file.url = strapi.config.url + file.url;


if (_.isArray(file.related))
file.related = file.related.map(obj => obj.ref

return file;
));
,


and i got this error, running strapi start:

/home/mike/Desktop/clik.asia.admin/node_modules/image-compressor/image-compressor.js:295
)(window, document);
^

ReferenceError: window is not defined
at Object.<anonymous> (/home/mike/Desktop/clik.asia.admin/node_modules/image-compressor/image-compressor.js:295:4)
at Module._compile (module.js:652:30)
at Object.Module._extensions..js (module.js:663:10)
at Module.load (module.js:565:32)
at tryModuleLoad (module.js:505:12)
at Function.Module._load (module.js:497:3)
at Module.require (module.js:596:17)
at require (internal/module.js:11:18)
at Object.<anonymous> (/home/mike/Desktop/clik.asia.admin/plugins/upload/controllers/Upload.js:10:20)
at Module._compile (module.js:652:30)


2 Answers
2

If you want you can customize the upload service to add a custom logic (using image-compressor.js) to compress your images before uploading it.

upload service

Here is the controller of /upload route: https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-upload/controllers/Upload.js#L12

/upload

Here is the service function: https://github.com/strapi/strapi/blob/master/packages/strapi-plugin-upload/services/Upload.js#L56

This is currently not possible only with Strapi. I suggest you to upload your files on Cloudinary (https://github.com/strapi/strapi/tree/master/packages/strapi-upload-cloudinary) and use their API to resize them.

By clicking "Post Your Answer", you acknowledge that you have read our updated terms of service, privacy policy and cookie policy, and that your continued use of the website is subject to these policies.