Strapi: Problems updating image dimensions

129 Views Asked by At

Bug report

Required System information

  • Node.js version: v14.19.3

  • NPM version: 6.14.17

  • Strapi version: v4.11.4

  • Database: postgres

  • Operating system: (macbook pro m1)

  • Is your project Javascript or Typescript: javascript

Describe the bug

I have created an endpoint that focuses on uploading and updating an image to a field (avatar) from the users table and applying resize of the dimensions to 1000x1000 using the sharp library

I have uploaded an image with DIMENSIONS 2768✕2208, but when updating the image values to width: 1000, height: 1000 the changes are not applied. I keep seeing 2768✕2208

Original Dimensions: {
   format: 'jpeg',
   width: 2768,
   height: 2208,
   space: 'srgb',
   channels: 3,
   depth: 'uchar',
   density: 72,
   chromaSubsampling: '4:2:0',
   isProgressive: false,
   resolutionUnit: 'inch',
   hasProfile: false,
   hasAlpha: false,
   orientation: 6,
   exif: <Buffer 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 0c 00 00 01 04 00 01 00 00 00 d0 0a 00 00 01 01 04 00 01 00 00 00 a0 08 00 00 0f 01 02 00 08 00 00 00 9e 00 ... 27422 more bytes>,
   xmp: <Buffer 3c 78 3a 78 6d 70 6d 65 74 61 20 78 6d 6c 6e 73 3a 78 3d 22 61 64 6f 62 65 3a 6e 73 3a 6d 65 74 61 2f 22 20 78 3a 7 8 6d 70 74 6b 3d 22 41 64 6f 62 65 ... 1197 more bytes>
}
New Dimensions: {
   format: 'jpeg',
   size: 111518,
   width: 1000,
   height: 1000,
   space: 'srgb',
   channels: 3,
   depth: 'uchar',
   density: 72,
   chromaSubsampling: '4:2:0',
   isProgressive: false,
   resolutionUnit: 'inch',
   hasProfile: true,
   hasAlpha: false,
   orientation: 6,
   exif: <Buffer 45 78 69 66 00 00 49 49 2a 00 08 00 00 00 0c 00 00 01 04 00 01 00 00 00 d0 0a 00 00 01 01 04 00 01 00 00 00 a0 08 00 00 0f 01 02 00 08 00 00 00 9e 00 ... 27434 more bytes>,
   icc: <Buffer 00 00 1b 0a 6c 63 6d 73 02 30 00 00 6d 6e 74 72 52 47 42 20 58 59 5a 20 07 d4 00 08 00 0d 00 0c 00 12 00 06 61 63 73 70 4d 53 46 54 00 00 00 00 6c 63 ... 6872 more bytes>,
   xmp: <Buffer 3c 78 3a 78 6d 70 6d 65 74 61 20 78 6d 6c 6e 73 3a 78 3d 22 61 64 6f 62 65 3a 6e 73 3a 6d 65 74 61 2f 22 20 78 3a 7 8 6d 70 74 6b 3d 22 41 64 6f 62 65 ... 1197 more bytes>
}

The changes to the new dimensions are being applied correctly, but when I check in strapi, the values have not been updated

Screenshots

Code snippets

"use strict";

const { first } = require("lodash");
const sharp = require("sharp");
const { getPostgreSQLError } = require("../../../utils/error-lookup");

/**
 * A set of functions called "actions" for `upload-user-avatar`
 */

module.exports = {
  upload: async (ctx) => {
    try {
      const { user } = ctx.state;
      if (!user) {
        ctx.status = 401;
        ctx.body = { message: "..." };
        return;
      }

      const file = ctx.request.files;
      const avatar = file["files.avatar"];

      if (!avatar) {
        ctx.status = 400;
        ctx.body = { message: "..." };
        return;
      }

      // Calculate the dimensions for a square avatar (e.g., 1000x1000)
      const AVATAR_SIZE = 1000;

      const originalDimensions = await sharp(avatar.path).metadata();
      console.log("Original Dimensions:", originalDimensions);

      // Resize the image to the desired dimensions and maintain orientation
      const resizedBuffer = await sharp(avatar.path)
        .resize({
          width: AVATAR_SIZE,
          height: AVATAR_SIZE,
          fit: "cover", // This option ensures the image is resized without changing the aspect ratio
          position: "center",
        })
        .withMetadata()
        .toBuffer();

      const newDimensions = await sharp(resizedBuffer).metadata();
      console.log("New Dimensions:", newDimensions);

      // Upload the resized image using Strapi's upload service
      const resizedFile = await strapi.plugins.upload.services.upload.upload({
        data: resizedBuffer,
        files: {
          name: avatar.name,
          path: avatar.path,
          type: avatar.type,
        },
      });

      const resizedFileAsObject = first(resizedFile);

      // Save the resized image URL to the user's avatar field
      await strapi.db.query("plugin::users-permissions.user").update({
        where: { id: user.id },
        data: {
          avatar: {
            id: resizedFileAsObject.id,
            width: newDimensions.width,
            height: newDimensions.height,
          },
        },
      });

      ctx.status = 200;
      ctx.body = {
        message: "...",
      };
    } catch (error) {
      const errorMessage = getPostgreSQLError(error?.code);
      ctx.body = errorMessage ? errorMessage : error;
    }
  },
};

Checking in the files table the width/height values have the default values and not 1000X1000, they are not being updated.

enter image description here

0

There are 0 best solutions below