That's definitely a bug in the validation logic. If 369x311 was accepted but 370x310 showed an error, there's an inconsistency in how the dimensions are being checked. Let me fix this issue:

I've made a few important changes to fix the validation issue:

1. Added debugging logs: I've added console.log statements to show the exact dimensions of the uploaded image. This will help you troubleshoot if there are still issues.
2. Improved error message: The error message now includes the actual dimensions of the uploaded image, which will make it clearer to users why their image was rejected.
3. Simplified validation logic: I've made sure the validation logic is consistent and straightforward.

The issue you're experiencing (369x311 accepted but 370x310 rejected) shouldn't happen with proper validation since both exceed 300x300px. This suggests there might be one of these issues:

1. Rounding errors: Some browsers might be reporting slightly different dimensions than the actual image.
2. Aspect ratio confusion: There might have been some aspect ratio calculation that was causing confusion.
3. Logic error: There could have been a bug in how the validation was being applied.

With these changes, the validation should now be more consistent and transparent. The console logs will help you identify if there are any remaining issues with how the dimensions are being detected.

If you're still experiencing problems after these changes, please let me know the exact error message and console output you see when uploading images of different sizes.

I'll implement the same image validation improvements for both FCA components, including file size limits and dimension constraints.

I've implemented the same image validation improvements for both FCA components. Here's what I've added to each file:

1. File Size Validation:

   • Added a check to ensure uploaded files are less than 500KB (512,000 bytes)
   • Shows an error message if the file is too large

2. Image Dimension Validation:

   • Implemented validation to ensure images are between 150x150px and 300x300px
   • Added debugging logs to show the actual dimensions of uploaded images
   • Improved error messages to show the current dimensions alongside the allowed range

3. Filename Extraction:

   • Added a function to extract filenames from Cloudinary URLs by splitting at "/"
   • Uses the value at index 6 which contains the actual filename in Cloudinary URLs
   • Shows "Current logo" as a fallback if no filename can be extracted

4. UI Improvements:

   • Updated the helper text to show the new dimension constraints (150x150px to 300x300px)
   • Added proper error handling with try/catch blocks
   • Added memory cleanup with URL.revokeObjectURL() to prevent memory leaks

5. For the Update Component:

   • Added a state to track if we're using the original image or a new one
   • Sets the image name from the existing URL when the component loads
   • Properly handles the case when a user removes an image

These changes ensure consistent validation across all your form components, providing users with clear feedback about image requirements and preventing invalid uploads.