diff --git a/api/server/routes/profilePicture.js b/api/server/routes/profilePicture.js index add2585ae8e..842e2cf0f9f 100644 --- a/api/server/routes/profilePicture.js +++ b/api/server/routes/profilePicture.js @@ -1,12 +1,11 @@ const express = require('express'); const router = express.Router(); -const multer = require('multer'); // Aggiunto per gestire i dati FormData +const multer = require('multer'); const uploadProfilePicture = require('~/server/services/ProfilePictureCreate'); const { requireJwtAuth } = require('../middleware/'); const { getUserController } = require('../controllers/AuthController'); -// Configura multer per gestire i dati FormData const upload = multer(); router.get('/', requireJwtAuth, getUserController); @@ -14,7 +13,7 @@ router.get('/', requireJwtAuth, getUserController); router.post('/', upload.single('input'), async (req, res) => { try { const { userId } = req.body; - const input = req.file.buffer; // Utilizza req.file.buffer per ottenere i dati del file + const input = req.file.buffer; if (!userId) { throw new Error('User ID is undefined'); diff --git a/api/server/services/ProfilePictureCreate.js b/api/server/services/ProfilePictureCreate.js index 178c29567f8..4378beb32da 100644 --- a/api/server/services/ProfilePictureCreate.js +++ b/api/server/services/ProfilePictureCreate.js @@ -1,7 +1,7 @@ const sharp = require('sharp'); const { storage, ref, uploadBytes, getDownloadURL } = require('./firebase'); const fetch = require('node-fetch'); -const fs = require('fs').promises; // Aggiunta per gestire i file +const fs = require('fs').promises; async function convertToWebP(inputBuffer) { return sharp(inputBuffer).resize({ width: 150 }).toFormat('webp').toBuffer(); @@ -27,14 +27,24 @@ async function uploadProfilePicture(userId, input) { } else if (input instanceof Buffer) { imageBuffer = input; } else if (typeof input === 'object' && input instanceof File) { - // Se l'input è un oggetto File, leggi il suo contenuto come buffer const fileContent = await fs.readFile(input.path); imageBuffer = Buffer.from(fileContent); } else { throw new Error('Invalid input type. Expected URL, Buffer, or File.'); } - const webPBuffer = await convertToWebP(imageBuffer); + const { width, height } = await sharp(imageBuffer).metadata(); + const minSize = Math.min(width, height); + const squaredBuffer = await sharp(imageBuffer) + .extract({ + left: Math.floor((width - minSize) / 2), + top: Math.floor((height - minSize) / 2), + width: minSize, + height: minSize, + }) + .toBuffer(); + + const webPBuffer = await convertToWebP(squaredBuffer); await uploadBytes(profilePicRef, webPBuffer); diff --git a/client/src/components/Nav/NavLinks.tsx b/client/src/components/Nav/NavLinks.tsx index 386cd918e58..65a01940f43 100644 --- a/client/src/components/Nav/NavLinks.tsx +++ b/client/src/components/Nav/NavLinks.tsx @@ -119,7 +119,7 @@ function NavLinks() { } + svg={() => } text={localize('com_nav_settings')} clickHandler={() => setShowSettings(true)} /> diff --git a/client/src/components/Nav/Settings.tsx b/client/src/components/Nav/Settings.tsx index f8dad8b8b6e..d92dba637db 100644 --- a/client/src/components/Nav/Settings.tsx +++ b/client/src/components/Nav/Settings.tsx @@ -1,7 +1,6 @@ import * as Tabs from '@radix-ui/react-tabs'; import { Dialog, DialogContent, DialogHeader, DialogTitle } from '~/components/ui'; -import { GearIcon, DataIcon } from '~/components/svg'; -import { UserIcon } from 'lucide-react'; +import { GearIcon, DataIcon, UserIcon } from '~/components/svg'; import { useMediaQuery, useLocalize } from '~/hooks'; import type { TDialogProps } from '~/common'; import { General, Data, Account } from './SettingsTabs'; diff --git a/client/src/components/Nav/SettingsTabs/Account/ProfilePicture.tsx b/client/src/components/Nav/SettingsTabs/Account/ProfilePicture.tsx index 0fd35bf5c97..aaaedebce5c 100644 --- a/client/src/components/Nav/SettingsTabs/Account/ProfilePicture.tsx +++ b/client/src/components/Nav/SettingsTabs/Account/ProfilePicture.tsx @@ -1,5 +1,5 @@ import React, { useState, useEffect } from 'react'; -import { FileUp } from 'lucide-react'; +import { FileImage } from 'lucide-react'; import { useAuthContext } from '~/hooks'; import { cn } from '~/utils/'; import { useLocalize } from '~/hooks'; @@ -78,7 +78,7 @@ function ProfilePictureUpload() { return ( <>
- Profile Picture + {localize('com_nav_profile_picture')}