Merge pull request #538 from DDMAL/add-img-fix

fix: handle non-JSON error responses gracefully

Author: yinanazhou

web-app/django/VIM/apps/instruments/error_codes.py

@@ -49,7 +49,7 @@ class ErrorCode:
     ErrorCode.INVALID_LANGUAGE_CODE: "One or more language codes are invalid.",
     ErrorCode.INVALID_HBS_CLASSIFICATION: "Valid Hornbostel-Sachs classification (at least 2 digits) is required.",
     ErrorCode.INVALID_IMAGE_TYPE: "Invalid image type. Allowed types: JPEG, PNG, GIF, WebP.",
-    ErrorCode.INVALID_IMAGE_SIZE: "Image file size must be less than 5MB.",
+    ErrorCode.INVALID_IMAGE_SIZE: "Image file size must be less than 2MB.",
     ErrorCode.FIELD_TOO_LONG: "One or more fields exceed the maximum allowed length.",
     ErrorCode.INVALID_JSON_FORMAT: "Invalid data format. Please check your request and try again.",
     ErrorCode.DUPLICATE_NAME_IN_REQUEST: "Duplicate entries detected in your submission.",

web-app/django/VIM/apps/instruments/utils/validators.py

@@ -195,7 +195,7 @@ def validate_image_file(image_file) -> Tuple[bool, str]:
 
     # Check file size
     if image_file.size > settings.MAX_IMAGE_SIZE:
-        return False, "Image file size must be less than 5MB"
+        return False, "Image file size must be less than 2MB"
 
     # Check content type
     content_type = image_file.content_type

web-app/django/VIM/settings.py

@@ -182,7 +182,7 @@
 # Media files (user uploads & wikidata images)
 MEDIA_ROOT = ROOT_DIR / "media"
 MEDIA_URL = "/media/"
-MAX_IMAGE_SIZE = 5 * 1024 * 1024  # 5MB
+MAX_IMAGE_SIZE = 2 * 1024 * 1024  # 2MB
 
 # Default primary key field type
 # https://docs.djangoproject.com/en/4.2/ref/settings/#default-auto-field

web-app/django/VIM/templates/instruments/create.html

@@ -101,7 +101,7 @@ <h5>Image (Optional)</h5>
                   <div class="form-text">
                     Accepted formats: JPEG, PNG, GIF, WebP.
                     <br />
-                    Max size: 5MB.
+                    Max size: 2MB.
                   </div>
                   <div class="valid-feedback"></div>
                   <div class="invalid-feedback"></div>

web-app/frontend/src/instruments/helpers/CreateInstrumentManager.ts

@@ -383,7 +383,20 @@ export class CreateInstrumentManager {
         body: submitData,
       });
 
-      const data: CreateInstrumentResponse = await response.json();
+      let data: CreateInstrumentResponse;
+      try {
+        data = await response.json();
+      } catch {
+        // Server returned non-JSON (e.g. 413 HTML page from an upstream proxy)
+        const message =
+          response.status === 413
+            ? 'The image is too large to upload. Please use an image under 2MB.'
+            : `Server error (${response.status}). Please try again.`;
+        this.showModalError(message);
+        confirmBtn.disabled = false;
+        confirmBtn.innerHTML = originalText;
+        return;
+      }
 
       // Check HTTP status first
       if (!response.ok) {

web-app/frontend/src/instruments/helpers/CreateInstrumentValidator.ts

@@ -21,7 +21,7 @@ const ALLOWED_IMAGE_TYPES = [
   'image/gif',
   'image/webp',
 ];
-const MAX_IMAGE_SIZE = 5 * 1024 * 1024; // 5MB
+const MAX_IMAGE_SIZE = 2 * 1024 * 1024; // 2MB
 
 export class CreateInstrumentValidator {
   private languages: WikidataLanguage[];
@@ -194,7 +194,7 @@ export class CreateInstrumentValidator {
     if (file.size > MAX_IMAGE_SIZE) {
       return {
         isValid: false,
-        message: 'Image file size must be less than 5MB',
+        message: 'Image file size must be less than 2MB',
         type: 'error',
       };
     }