Merge pull request #1307 from rlratcliffe/1265-fix-import-image-size-discrepancy

erinz2020 · web-flow · commit ec5fbac4dbe4 · 2025-12-01T19:28:06.000-05:00
1265 fix import image size discrepancy
diff --git a/PhotoUploadDevNotes.md b/PhotoUploadDevNotes.md
@@ -0,0 +1,13 @@
+# Photo Upload
+
+There are currently three places to change the default photo upload size and default max count amount. These three places affect these pages or modals: `Submit -> Report an Encounter`, `Submit -> Report an Encounter (classic)`, `Submit -> Bulk Import`, `Submit -> Bulk Import -> See Instructions`.
+
+This is linked from comments in the relevant files which say: `Refer to PhotoUploadDevNotes.md for information/where else to change`. Non-development properties files are not annotated with this comment since those files will be changed by users.
+
+Order of using:
+1. `commonConfiguration.properties`, which each production Wildbook can change if needed
+    - ./devops/deploy/.dockerfiles/tomcat/commonConfiguration.properties
+    - ./devops/development/.dockerfiles/tomcat/commonConfiguration.properties
+    - ./src/main/resources/bundles/commonConfiguration.properties
+2. `org/ecocean/CommonConfiguration.java`, first fallback if properties are not initialized
+3. `frontend/src/constants/photoUpload.js`, second fallback if SiteSettings is not accessible
diff --git a/devops/deploy/.dockerfiles/tomcat/commonConfiguration.properties b/devops/deploy/.dockerfiles/tomcat/commonConfiguration.properties
@@ -329,7 +329,9 @@ biologicalMeasurementSamplingProtocols2 = No lipids extracted, uncorrected
 
 #Maximum uploadable media size in megabytes (MB)
 #This value is used for encounter images and videos as well as for file associations added to a MarkedIndividual.
-maxMediaSize = 40
+maxMediaSize = 3
+#Maximum number of media per encounter
+maximumMediaCountEncounter = 200
 
 #allow video download for not logged in users
 videoDLNotLoggedIn = false
diff --git a/devops/development/.dockerfiles/tomcat/commonConfiguration.properties b/devops/development/.dockerfiles/tomcat/commonConfiguration.properties
@@ -329,7 +329,10 @@ biologicalMeasurementSamplingProtocols2 = No lipids extracted, uncorrected
 
 #Maximum uploadable media size in megabytes (MB)
 #This value is used for encounter images and videos as well as for file associations added to a MarkedIndividual.
-maxMediaSize = 40
+# Refer to PhotoUploadDevNotes.md for information/where else to change
+maxMediaSize = 3
+#Maximum number of media per encounter
+maximumMediaCountEncounter = 200
 
 #allow video download for not logged in users
 videoDLNotLoggedIn = false
diff --git a/frontend/src/constants/photoUpload.js b/frontend/src/constants/photoUpload.js
@@ -0,0 +1,5 @@
+const defaultMaxMediaSize = 3;
+const defaultMaxMediaCount = 200;
+// Refer to PhotoUploadDevNotes.md for information/where else to change
+
+export { defaultMaxMediaSize, defaultMaxMediaCount };
diff --git a/frontend/src/locale/de.json b/frontend/src/locale/de.json
@@ -374,7 +374,6 @@
   "BULK_IMPORT_UPLOAD_IMAGE_DESC_PART_2": "Nur die Formate JPEG, JPG und PNG werden unterstützt. Dateien in anderen Formaten werden ignoriert.",
   "BULK_IMPORT_PHOTO_INSTRUCTION": "Ziehe deine Ordner oder Dateien hierher oder durchsuchen zum Hochladen",
   "SEE_INSTRUCTIONS": "Anleitung anzeigen",
-  "BULK_IMPORT_UPLOAD_IMAGE_DESC": "Die Bildnamen müssen der Spalte „Encounter.MediaAsset“ in deiner Wildbook-Standardformat-Tabelle entsprechen. Bilder müssen kleiner als 3 MB sein. Du kannst nur 200 Bilder auf einmal hochladen.",
   "BULK_IMPORT_UPLOAD_SPREADSHEET": "Tabelle hochladen",
   "BULK_IMPORT_UPLOAD_SPREADSHEET_DESC_PART1": "Lade deine Tabellen-Datei (.csv, .xlsx, .xls) im ",
   "BULK_IMPORT_UPLOAD_SPREADSHEET_DESC_PART2": "Wildbook-Standardformat hoch.",
@@ -397,8 +396,8 @@
   "BULK_IMPORT_INSTRUCTIONS_STEP1_PLACE_IMAGES": "Lege alle Bilder in einen einzigen Ordner",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_IMAGE_REQUIREMENTS": "Bilder müssen:",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FORMAT": "Im JPEG-, JPG- oder PNG-Format sein",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Weniger als 3 MB sein",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Nicht mehr als 200 Dateien pro Upload",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Weniger als {maxSize}MB sein",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Nicht mehr als {maxImageCount} Dateien pro Upload",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FILENAME_REQUIREMENTS": "Dateinamen müssen",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_LETTERS_NUMBERS": "Nur englische Buchstaben, Zahlen, Punkte und Leerzeichen verwenden",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_MATCH_ENTRIES": "Genau mit den Einträgen in der Encounter.mediaAsset-Spalte übereinstimmen",
diff --git a/frontend/src/locale/en.json b/frontend/src/locale/en.json
@@ -396,8 +396,8 @@
     "BULK_IMPORT_INSTRUCTIONS_STEP1_PLACE_IMAGES": "Place all your images in a single folder",
     "BULK_IMPORT_INSTRUCTIONS_STEP1_IMAGE_REQUIREMENTS": "Images must be:",
     "BULK_IMPORT_INSTRUCTIONS_STEP1_FORMAT": "JPEG, JPG or PNG format",
-    "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Under 3MB",
-    "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Not exceed 200 files per import",
+    "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Under {maxSize}MB",
+    "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Not exceed {maxImageCount} files per import",
     "BULK_IMPORT_INSTRUCTIONS_STEP1_FILENAME_REQUIREMENTS": "Filenames must",
     "BULK_IMPORT_INSTRUCTIONS_STEP1_LETTERS_NUMBERS": "Use only letters from the English alphabet, numbers, periods and spaces",
     "BULK_IMPORT_INSTRUCTIONS_STEP1_MATCH_ENTRIES": "Exactly match entries in the Encounter.mediaAsset column of your spreadsheet",
diff --git a/frontend/src/locale/es.json b/frontend/src/locale/es.json
@@ -395,8 +395,8 @@
   "BULK_IMPORT_INSTRUCTIONS_STEP1_PLACE_IMAGES": "Coloca todas tus imágenes en una sola carpeta",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_IMAGE_REQUIREMENTS": "Las imágenes deben:",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FORMAT": "Formato JPEG, JPG o PNG",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Menos de 3 MB",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "No exceder 200 archivos por importación",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Menos de {maxSize}MB",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "No exceder {maxImageCount} archivos por importación",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FILENAME_REQUIREMENTS": "Los nombres de archivo deben",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_LETTERS_NUMBERS": "Usar solo letras en inglés, números, puntos y espacios",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_MATCH_ENTRIES": "Coincidir exactamente con las entradas en la columna Encounter.mediaAsset de tu hoja de cálculo",
diff --git a/frontend/src/locale/fr.json b/frontend/src/locale/fr.json
@@ -395,8 +395,8 @@
   "BULK_IMPORT_INSTRUCTIONS_STEP1_PLACE_IMAGES": "Placez toutes vos images dans un seul dossier",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_IMAGE_REQUIREMENTS": "Les images doivent :",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FORMAT": "Format JPEG, JPG ou PNG",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Moins de 3 Mo",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Ne pas dépasser 200 fichiers par importation",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Moins de {maxSize}Mo",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Ne pas dépasser {maxImageCount} fichiers par importation",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FILENAME_REQUIREMENTS": "Les noms de fichiers doivent",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_LETTERS_NUMBERS": "Utiliser uniquement des lettres anglaises, des chiffres, des points et des espaces",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_MATCH_ENTRIES": "Correspondre exactement aux entrées de la colonne Encounter.mediaAsset",
diff --git a/frontend/src/locale/it.json b/frontend/src/locale/it.json
@@ -373,7 +373,6 @@
   "BULK_IMPORT_UPLOAD_IMAGE_DESC_PART_2": "Sono supportati solo i formati JPEG, JPG e PNG. I file in altri formati verranno ignorati.",
   "BULK_IMPORT_PHOTO_INSTRUCTION": "Trascina qui la cartella o i file oppure sfoglia per selezionare i file da caricare",
   "SEE_INSTRUCTIONS": "Vedi istruzioni",
-  "BULK_IMPORT_UPLOAD_IMAGE_DESC": "I nomi delle immagini devono corrispondere alla colonna “Encounter.MediaAsset” del tuo foglio di calcolo nel formato standard di Wildbook. Le immagini devono essere inferiori a 3 MB. Puoi caricare solo 200 immagini alla volta.",
   "BULK_IMPORT_UPLOAD_SPREADSHEET": "Carica foglio di calcolo",
   "BULK_IMPORT_UPLOAD_SPREADSHEET_DESC_PART1": "Carica il tuo file foglio di calcolo (.csv, .xlsx, .xls) nel ",
   "BULK_IMPORT_UPLOAD_SPREADSHEET_DESC_PART2": "Formato standard di Wildbook.",
@@ -396,8 +395,8 @@
   "BULK_IMPORT_INSTRUCTIONS_STEP1_PLACE_IMAGES": "Inserisci tutte le immagini in un'unica cartella",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_IMAGE_REQUIREMENTS": "Le immagini devono:",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FORMAT": "Essere in formato JPEG, JPG o PNG",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Essere inferiori a 3 MB",
-  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Non superare i 200 file per importazione",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE": "Essere inferiori a {maxSize}MB",
+  "BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT": "Non superare i {maxImageCount} file per importazione",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_FILENAME_REQUIREMENTS": "I nomi dei file devono",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_LETTERS_NUMBERS": "Usare solo lettere inglesi, numeri, punti e spazi",
   "BULK_IMPORT_INSTRUCTIONS_STEP1_MATCH_ENTRIES": "Corrispondere esattamente alle voci nella colonna Encounter.mediaAsset",
diff --git a/frontend/src/pages/BulkImport/BulkImportImageUpload.jsx b/frontend/src/pages/BulkImport/BulkImportImageUpload.jsx
@@ -14,6 +14,10 @@ import { observer } from "mobx-react-lite";
 import BulkImportSeeInstructionsButton from "./BulkImportSeeInstructionsButton";
 import { FixedSizeList as List } from "react-window";
 import { BulkImportImageUploadInfo } from "./BulkImportImageUploadInfo";
+import {
+  defaultMaxMediaSize,
+  defaultMaxMediaCount,
+} from "../../constants/photoUpload.js";
 
 const handleDragOver = (e) => {
   e.preventDefault();
@@ -30,11 +34,13 @@ export const BulkImportImageUpload = observer(({ store, renderMode1 }) => {
   const theme = useContext(ThemeContext);
   const originalBorder = `1px dashed ${theme.primaryColors.primary500}`;
   const { data } = useGetSiteSettings();
-  const maxSize = data?.maximumMediaSizeMegabytes || 40;
+  const maxSize = data?.maximumMediaSizeMegabytes || defaultMaxMediaSize;
   const [isProcessingDrop, setIsProcessingDrop] = useState(false);
   const [renderMode, setRenderMode] = useState("grid");
   const THUMBNAIL_THRESHOLD = 50;
-  store.setMaxImageCount(data?.maximumMediaCountEncounter || 200);
+  store.setMaxImageCount(
+    data?.maximumMediaCountEncounter || defaultMaxMediaCount,
+  );
   const currentCount = store.imagePreview.length;
 
   useEffect(() => {
diff --git a/frontend/src/pages/BulkImport/BulkImportInstructionsModal.jsx b/frontend/src/pages/BulkImport/BulkImportInstructionsModal.jsx
@@ -4,9 +4,19 @@ import { FormattedMessage } from "react-intl";
 import { observer } from "mobx-react-lite";
 import MainButton from "../../components/MainButton";
 import ThemeColorContext from "../../ThemeColorProvider";
+import useGetSiteSettings from "../../models/useGetSiteSettings";
+import {
+  defaultMaxMediaSize,
+  defaultMaxMediaCount,
+} from "../../constants/photoUpload.js";
 
 const BulkImportInstructionsModal = observer(({ store }) => {
   const theme = React.useContext(ThemeColorContext);
+  const { data } = useGetSiteSettings();
+  const maxSize = data?.maximumMediaSizeMegabytes || defaultMaxMediaSize;
+  const maxImageCount =
+    data?.maximumMediaCountEncounter || defaultMaxMediaCount;
+
   return (
     <Modal
       show={store.showInstructions}
@@ -62,10 +72,20 @@ const BulkImportInstructionsModal = observer(({ store }) => {
                 <FormattedMessage id="BULK_IMPORT_INSTRUCTIONS_STEP1_FORMAT" />
               </li>
               <li>
-                <FormattedMessage id="BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE" />
+                <FormattedMessage
+                  id="BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_SIZE"
+                  values={{
+                    maxSize: maxSize,
+                  }}
+                />
               </li>
               <li>
-                <FormattedMessage id="BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT" />
+                <FormattedMessage
+                  id="BULK_IMPORT_INSTRUCTIONS_STEP1_MAX_COUNT"
+                  values={{
+                    maxImageCount: maxImageCount,
+                  }}
+                />
               </li>
             </ul>
           </li>
diff --git a/frontend/src/pages/ReportsAndManagamentPages/ImageSection.jsx b/frontend/src/pages/ReportsAndManagamentPages/ImageSection.jsx
@@ -14,6 +14,7 @@ import useGetSiteSettings from "../../models/useGetSiteSettings";
 import { observer } from "mobx-react-lite";
 import { Alert } from "react-bootstrap";
 import EXIF from "exif-js";
+import { defaultMaxMediaSize } from "../../constants/photoUpload.js";
 
 export const ImageSection = observer(({ store }) => {
   const [files, setFiles] = useState([]);
@@ -23,7 +24,7 @@ export const ImageSection = observer(({ store }) => {
   const [previewData, setPreviewData] = useState([]);
   const fileInputRef = useRef(null);
   const { data } = useGetSiteSettings();
-  const maxSize = data?.maximumMediaSizeMegabytes || 40;
+  const maxSize = data?.maximumMediaSizeMegabytes || defaultMaxMediaSize;
   const theme = useContext(ThemeContext);
   const originalBorder = `1px dashed ${theme.primaryColors.primary500}`;
   const updatedBorder = `2px dashed ${theme.primaryColors.primary500}`;
diff --git a/src/main/java/org/ecocean/CommonConfiguration.java b/src/main/java/org/ecocean/CommonConfiguration.java
@@ -432,8 +432,9 @@ public static String getHTMLDescription(String context) {
         return getProperty("htmlDescription", context).trim();
     }
 
+    // Refer to PhotoUploadDevNotes.md for information/where else to change
     public static int getMaxMediaSizeInMegabytes(String context) {
-        int maxSize = 10;
+        int maxSize = 3;
 
         try {
             String sMaxSize = getProperty("maxMediaSize", context);
@@ -448,6 +449,8 @@ public static int getMaxMediaSizeInMegabytes(String context) {
         }
         return maxSize;
     }
+
+    // Refer to PhotoUploadDevNotes.md for information/where else to change
     public static int getMaxMediaCountEncounter(String context) {
         int maxCount = 200;
 
diff --git a/src/main/resources/bundles/commonConfiguration.properties b/src/main/resources/bundles/commonConfiguration.properties
@@ -305,7 +305,7 @@ biologicalMeasurementSamplingProtocols2 = No lipids extracted, uncorrected
 
 #Maximum uploadable media size in megabytes (MB)
 #This value is used for encounter images and videos as well as for file associations added to a MarkedIndividual.
-maxMediaSize = 40
+maxMediaSize = 3
 #Maximum number of media per encounter
 maximumMediaCountEncounter = 200
 
