fix: photos are optional

frontend/src/components/Map/components/SuggestNewPointButton.jsx

@@ -11,12 +11,12 @@ import {
     MenuItem,
     InputLabel,
     FormControl,
-    Snackbar,
     IconButton,
     Checkbox,
     ListItemText,
     OutlinedInput,
     Tooltip,
+    Alert,
 } from '@mui/material';
 
 import AddAPhotoIcon from '@mui/icons-material/AddAPhoto';
@@ -29,6 +29,8 @@ import { buttonStyle, getLocationAwareStyles } from '../../../styles/buttonStyle
 import { getCsrfToken } from '../../../utils/csrf';
 import { useLocation } from '../context/LocationContext';
 import { httpService } from '../../../services/http/httpService';
+import { toast } from '../../../utils/toast';
+import { compressImageToJpeg } from '../../../utils/imageCompression';
 
 // Map a category's options to a { key: translation } object.
 // Options come as [[key, translation], ...] or [key, ...].
@@ -44,20 +46,21 @@ const mapCategoryOptions = categoryOptions => {
     return optionMap;
 };
 
-// Build { fieldNames, options } translation maps from the categories API shape.
+// Build { fieldNames, options } translation maps from httpService.getCategoriesData()'s
+// { categories: [{ categoryKey, categoryName, options }, ...] } shape.
 const buildCategoryTranslations = categoriesData => {
     const fieldNames = {};
     const options = {};
 
-    categoriesData.forEach(categoryData => {
-        const [categoryKey, categoryName] = categoryData[0];
-        fieldNames[categoryKey] = categoryName;
+    (categoriesData.categories || []).forEach(
+        ({ categoryKey, categoryName, options: categoryOptions }) => {
+            fieldNames[categoryKey] = categoryName;
 
-        const categoryOptions = categoryData[1];
-        if (categoryOptions && categoryOptions.length > 0) {
-            options[categoryKey] = mapCategoryOptions(categoryOptions);
-        }
-    });
+            if (categoryOptions && categoryOptions.length > 0) {
+                options[categoryKey] = mapCategoryOptions(categoryOptions);
+            }
+        },
+    );
 
     return { fieldNames, options };
 };
@@ -75,10 +78,12 @@ export const SuggestNewPointButton = () => {
     const { t } = useTranslation();
     const { locationGranted, userPosition, requestLocationWithFeedback } = useLocation();
     const [showNewPointBox, setShowNewPointSuggestionBox] = useState(false);
-    const [snackbarOpen, setSnackbarOpen] = useState(false);
-    const [snackbarMessage, setSnackbarMessage] = useState('');
     const [photo, setPhoto] = useState(null);
     const [photoURL, setPhotoURL] = useState(null);
+    // Rendered inline in the dialog rather than as a toast: this dialog sits inside the
+    // map's component tree, where an ancestor (e.g. a Leaflet pane) can trap a toast's
+    // z-index in its own stacking context, leaving it hidden behind the dialog itself.
+    const [formError, setFormError] = useState(null);
     const [categoryTranslations, setCategoryTranslations] = useState({
         fieldNames: {},
         options: {},
@@ -98,8 +103,15 @@ export const SuggestNewPointButton = () => {
         fetchCategories();
     }, []);
 
-    // Read location schema from global object
-    const locationSchema = globalThis.LOCATION_SCHEMA || { obligatory_fields: [], categories: {} };
+    // Read location schema from global object. `photo` mirrors the backend's AttachmentConfig
+    // (see goodmap.py) so the frontend never has to guess/duplicate the limits it enforces.
+    const locationSchema = globalThis.LOCATION_SCHEMA || {
+        obligatory_fields: [],
+        categories: {},
+        photo: { allowed_mime_types: [], max_size_bytes: 0 },
+    };
+    const { allowed_mime_types: allowedPhotoMimeTypes, max_size_bytes: maxPhotoSizeBytes } =
+        locationSchema.photo;
 
     // Initialize dynamic form fields based on schema
     const initializeFormFields = () => {
@@ -121,7 +133,10 @@ export const SuggestNewPointButton = () => {
     const [formFields, setFormFields] = useState(initializeFormFields);
 
     const handleNewPointButton = () => {
-        requestLocationWithFeedback(() => setShowNewPointSuggestionBox(true));
+        requestLocationWithFeedback(() => {
+            setFormError(null);
+            setShowNewPointSuggestionBox(true);
+        });
     };
 
     const handleLocateMe = () => {
@@ -130,29 +145,38 @@ export const SuggestNewPointButton = () => {
 
     const handleCloseNewPointBox = () => {
         setShowNewPointSuggestionBox(false);
+        setFormError(null);
     };
 
-    const handleSnackbarClose = (event, reason) => {
-        if (reason === 'clickaway') {
-            return;
-        }
-
-        setSnackbarOpen(false);
-    };
-
-    const handlePhotoUpload = event => {
+    const handlePhotoUpload = async event => {
         const file = event.target.files[0];
         if (!file) {
             return;
         }
-        const fileSizeMB = file.size / 1024 / 1024;
-        if (fileSizeMB > 5) {
-            setSnackbarMessage(t('fileTooLarge'));
-            setSnackbarOpen(true);
+
+        if (allowedPhotoMimeTypes.includes(file.type) && file.size <= maxPhotoSizeBytes) {
+            setFormError(null);
+            setPhoto(file);
+            setPhotoURL(URL.createObjectURL(file));
             return;
         }
-        setPhoto(file);
-        setPhotoURL(URL.createObjectURL(file));
+
+        // Anything else (wrong format, oversized, or both) gets normalized to what the
+        // backend accepts: oversized photos are usually just high-resolution camera shots
+        // rather than genuinely undersizable, and re-encoding also fixes the format.
+        try {
+            const compressed = await compressImageToJpeg(file, { maxSizeBytes: maxPhotoSizeBytes });
+            if (compressed.size > maxPhotoSizeBytes) {
+                setFormError(t('fileTooLarge'));
+                return;
+            }
+            setFormError(null);
+            setPhoto(compressed);
+            setPhotoURL(URL.createObjectURL(compressed));
+        } catch (error) {
+            console.error('Photo processing failed:', error);
+            setFormError(t('photoProcessingFailed'));
+        }
     };
 
     const handleFieldChange = fieldName => event => {
@@ -161,11 +185,11 @@ export const SuggestNewPointButton = () => {
 
     const handleConfirmNewPoint = async event => {
         event.preventDefault();
+        setFormError(null);
 
         // Validate user position is available
         if (!userPosition || userPosition.lat === null || userPosition.lng === null) {
-            setSnackbarMessage(t('locationNotAvailable'));
-            setSnackbarOpen(true);
+            setFormError(t('locationNotAvailable'));
             return;
         }
 
@@ -184,8 +208,7 @@ export const SuggestNewPointButton = () => {
         });
 
         if (emptyFields.length > 0) {
-            setSnackbarMessage(t('fillRequiredFields', { fields: emptyFields.join(', ') }));
-            setSnackbarOpen(true);
+            setFormError(t('fillRequiredFields', { fields: emptyFields.join(', ') }));
             return;
         }
 
@@ -213,8 +236,7 @@ export const SuggestNewPointButton = () => {
                     'X-CSRFToken': csrfToken,
                 },
             });
-            setSnackbarMessage(t('locationSuggestedSuccess'));
-            setSnackbarOpen(true);
+            toast.success(t('locationSuggestedSuccess'));
 
             // Reset form after successful submission
             setFormFields(initializeFormFields());
@@ -225,8 +247,9 @@ export const SuggestNewPointButton = () => {
             setShowNewPointSuggestionBox(false);
         } catch (error) {
             console.error('Error suggesting new point:', error);
-            setSnackbarMessage(t('locationSuggestedError'));
-            setSnackbarOpen(true);
+            // Surface the backend's specific reason (e.g. photo format/size) when available,
+            // instead of a generic message that hides why the submission was rejected.
+            setFormError(error.response?.data?.message || t('locationSuggestedError'));
             // Dialog stays open on error so user can retry
         }
     };
@@ -346,6 +369,11 @@ export const SuggestNewPointButton = () => {
                 <DialogTitle>{t('suggestNewPointDialogTitle')}</DialogTitle>
                 <form onSubmit={handleConfirmNewPoint}>
                     <DialogContent>
+                        {formError && (
+                            <Alert severity="error" sx={{ mb: 2 }}>
+                                {formError}
+                            </Alert>
+                        )}
                         <Box display="flex" alignItems="center" gap={2}>
                             <TextField
                                 label={t('yourPosition')}
@@ -396,12 +424,6 @@ export const SuggestNewPointButton = () => {
                     </DialogActions>
                 </form>
             </Dialog>
-            <Snackbar
-                open={snackbarOpen}
-                autoHideDuration={6000}
-                onClose={handleSnackbarClose}
-                message={snackbarMessage}
-            />
         </>
     );
 };

frontend/src/components/common/AppToaster.jsx

@@ -1,4 +1,5 @@
 import React from 'react';
+import { createPortal } from 'react-dom';
 import toast, { ToastBar, Toaster } from 'react-hot-toast';
 import { IconButton } from '@mui/material';
 import Close from '@mui/icons-material/Close';
@@ -14,12 +15,21 @@ import { useMaxToasts } from '../../utils/hooks/useMaxToasts';
 export const AppToaster = () => {
     useMaxToasts();
 
-    return (
+    // Portalled to document.body (like MUI's Dialog) rather than rendered in place:
+    // this component lives deep inside the map's component tree, where an ancestor
+    // (e.g. a Leaflet pane) can establish its own stacking context and trap the
+    // toast's z-index there, so it loses to the Dialog's portal-level stacking no
+    // matter how high the z-index is set.
+    return createPortal(
         <Toaster
             position="top-center"
             reverseOrder={false}
             gutter={8}
-            containerStyle={{ zIndex: 99999999, top: 120 }}
+            // Centered on the viewport rather than anchored to a fixed pixel offset from
+            // the top: goodmap is embedded in third-party sites with varying header
+            // heights, so an assumed offset (e.g. "top: 120") can land the toast behind
+            // the host page's own header instead of over the dialog it relates to.
+            containerStyle={{ zIndex: 99999999, top: '50%', transform: 'translateY(-50%)' }}
             toastOptions={{
                 duration: 8000,
                 style: {
@@ -43,6 +53,7 @@ export const AppToaster = () => {
                     )}
                 </ToastBar>
             )}
-        </Toaster>
+        </Toaster>,
+        document.body,
     );
 };

frontend/src/locales/en/map.json

@@ -7,6 +7,7 @@
     "suggestNewPointDialogTitle": "Suggest a New Point",
     "yourPosition": "Your Position",
     "fileTooLarge": "The selected file is too large. Please select a file smaller than 5MB.",
+    "photoProcessingFailed": "Couldn't process this photo. Please try a different file.",
     "locationNotAvailable": "Location not available. Please enable location services and try again.",
     "fillRequiredFields": "Please fill in required fields: {{fields}}",
     "locationSuggestedSuccess": "Location suggested successfully!",

frontend/src/locales/pl/map.json

@@ -7,6 +7,7 @@
     "suggestNewPointDialogTitle": "Zaproponuj nowy punkt",
     "yourPosition": "Twoja pozycja",
     "fileTooLarge": "Wybrany plik jest za duży. Wybierz plik mniejszy niż 5MB.",
+    "photoProcessingFailed": "Nie udało się przetworzyć tego zdjęcia. Spróbuj wybrać inny plik.",
     "locationNotAvailable": "Lokalizacja niedostępna. Włącz usługi lokalizacji i spróbuj ponownie.",
     "fillRequiredFields": "Wypełnij wymagane pola: {{fields}}",
     "locationSuggestedSuccess": "Lokalizacja została zaproponowana pomyślnie!",

frontend/src/locales/ua/map.json

@@ -7,6 +7,7 @@
     "suggestNewPointDialogTitle": "Запропонувати нову точку",
     "yourPosition": "Ваша позиція",
     "fileTooLarge": "Вибраний файл завеликий. Виберіть файл розміром менше 5МБ.",
+    "photoProcessingFailed": "Не вдалося обробити це фото. Спробуйте вибрати інший файл.",
     "locationNotAvailable": "Місцезнаходження недоступне. Увімкніть служби геолокації та спробуйте знову.",
     "fillRequiredFields": "Заповніть обов'язкові поля: {{fields}}",
     "locationSuggestedSuccess": "Локацію успішно запропоновано!",

frontend/src/utils/imageCompression.js

@@ -0,0 +1,65 @@
+// Only the backend's allowed extensions are worth targeting (jpeg/jpg), so we
+// always re-encode to JPEG regardless of the source format.
+const MIN_QUALITY = 0.4;
+const QUALITY_STEP = 0.1;
+
+const loadImage = file =>
+    new Promise((resolve, reject) => {
+        const objectUrl = URL.createObjectURL(file);
+        const img = new Image();
+        img.onload = () => {
+            URL.revokeObjectURL(objectUrl);
+            resolve(img);
+        };
+        img.onerror = () => {
+            URL.revokeObjectURL(objectUrl);
+            reject(new Error('Failed to load image for compression'));
+        };
+        img.src = objectUrl;
+    });
+
+const canvasToBlob = (canvas, quality) =>
+    new Promise((resolve, reject) => {
+        canvas.toBlob(
+            blob => (blob ? resolve(blob) : reject(new Error('Image encoding failed'))),
+            'image/jpeg',
+            quality,
+        );
+    });
+
+/**
+ * Re-encodes an image file as JPEG, scaling it down to fit within maxDimension
+ * and lowering quality as needed to land under maxSizeBytes.
+ *
+ * @param {File} file - Source image file.
+ * @param {{maxSizeBytes?: number, maxDimension?: number}} options
+ * @returns {Promise<File>} Compressed JPEG file (may still exceed maxSizeBytes
+ *   if the image can't be reduced further without going below MIN_QUALITY).
+ */
+export const compressImageToJpeg = async (file, { maxSizeBytes, maxDimension = 1920 } = {}) => {
+    const img = await loadImage(file);
+
+    const scale = Math.min(1, maxDimension / Math.max(img.width, img.height));
+    const width = Math.round(img.width * scale);
+    const height = Math.round(img.height * scale);
+
+    const canvas = document.createElement('canvas');
+    canvas.width = width;
+    canvas.height = height;
+    const context = canvas.getContext('2d');
+    // JPEG has no alpha channel; without this, transparent PNG areas default to
+    // black (canvas pixels start as rgba(0,0,0,0), and the alpha just gets dropped).
+    context.fillStyle = '#fff';
+    context.fillRect(0, 0, width, height);
+    context.drawImage(img, 0, 0, width, height);
+
+    let quality = 0.9;
+    let blob = await canvasToBlob(canvas, quality);
+    while (blob.size > maxSizeBytes && quality > MIN_QUALITY) {
+        quality -= QUALITY_STEP;
+        blob = await canvasToBlob(canvas, quality);
+    }
+
+    const baseName = file.name.replace(/\.[^./\\]+$/, '') || 'photo';
+    return new File([blob], `${baseName}.jpg`, { type: 'image/jpeg' });
+};