title: How to customize strapi image upload to use third party library for image compression?
body: <p>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?</p>
  
  <blockquote>
    <p>1st attempt at integrating image-compressor:</p>
  </blockquote>
  
  <p>Here's my upload.js:</p>
  
  <pre><code>const Compressor = require('image-compressor')
  module.exports = {
  upload: async (ctx) =&gt; {
      // 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 =&gt; imageCompressor.run(file, compressorSettings), () =&gt; {})
  
      // 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 =&gt; {
        if (file.size &gt; 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 &amp;&amp; ref &amp;&amp; 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) =&gt; {
        // If is local server upload, add backend host as prefix
        if (file.url &amp;&amp; file.url[0] === '/') {
          file.url = strapi.config.url + file.url;
        }
  
        if (_.isArray(file.related)) {
          file.related = file.related.map(obj =&gt; obj.ref || obj);
        }
  
        return file;
      }));
    },
  </code></pre>
  
  <p>and i got this error, running strapi start:</p>
  
  <pre><code>/home/mike/Desktop/clik.asia.admin/node_modules/image-compressor/image-compressor.js:295
  })(window, document);
     ^
  
  ReferenceError: window is not defined
      at Object.&lt;anonymous&gt; (/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.&lt;anonymous&gt; (/home/mike/Desktop/clik.asia.admin/plugins/upload/controllers/Upload.js:10:20)
      at Module._compile (module.js:652:30)
  </code></pre>