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.