Merge pull request #40 from j-h-scheufen/endspurt-mvp

Fixed image orientation problem from mobile uploads

packages/quilombo/components/forms/ImageUpload.tsx

@@ -29,8 +29,6 @@ const ImageUpload = ({ value, ownerId, useFileUploadMutation: useDynamicMutation
   const [validationError, setValidationError] = useState<string | null>(null);
   const fileInputRef = useRef<HTMLInputElement | null>(null);
 
-  console.log('value in ImageUpload', value);
-  console.log('imagePreview;', imagePreview);
   const selectImageFile = () => {
     fileInputRef.current?.click();
   };

packages/quilombo/config/constants.ts

@@ -85,7 +85,7 @@ export const IMAGE_FORMATS: Record<ImageType, ResizeOptions> = {
   groupBanner: { height: 250, width: 800, fit: 'cover', position: 'attention' },
 };
 
-export const MAX_IMAGE_UPLOAD_SIZE_MB = 5;
+export const MAX_IMAGE_UPLOAD_SIZE_MB = 4.5; // 4.5 MB is the current limit for Vercel serverless functions! https://vercel.com/docs/concepts/limits/overview#serverless-function-payload-size-limit
 
 export const PINATA_FILE_GROUP = 'd923dfed-5f8d-440b-ae87-e8a43504eaa5'; // quilombo group ID
 

packages/quilombo/utils/pinata.ts

@@ -23,8 +23,8 @@ export const pinToGroup = async (
     return { error: `Invalid input data. Unsupported image mime-type. ${inFileType?.mime}`, errorStatus: 400 };
   }
 
-  // Image processing
-  const imageBuffer = await sharp(buffer).resize(resizeOptions).webp({ lossless: true }).toBuffer();
+  // Image processing (hint: rotate() is used to fix orientation before removing EXIF data)
+  const imageBuffer = await sharp(buffer).rotate().resize(resizeOptions).webp({ lossless: true }).toBuffer();
 
   const uploadData = new FormData();
   uploadData.append('file', new Blob([imageBuffer]));