fix(attachments): fix HEIC/HEIF thumbnail generation by converting to JPEG DEV-1289 (#6484)

### 📣 Summary
Fixes an issue where images submitted in `HEIC/HEIF` format did not show
a preview in UI. These images now generate standard `JPEG` thumbnails,
allowing them to appear normally in the data table and attachment
preview screens.

### 📖 Description
Previously, image files submitted in `HEIC/HEIF` format failed to
display a preview because backend could not generate thumbnails for
these formats. This update automatically converts `HEIC/HEIF` images
into `JPEG` thumbnails while keeping the original file unchanged. As a
result, previews now load reliably across all browsers and devices.

Author: rajpatel24

dependencies/pip/dev_requirements.txt

@@ -452,7 +452,11 @@ pathspec==0.12.1
 pexpect==4.9.0
     # via ipython
 pillow==10.3.0
-    # via django-markdownx
+    # via
+    #   django-markdownx
+    #   pillow-heif
+pillow-heif==0.22.0
+    # via -r dependencies/pip/requirements.in
 platformdirs==4.3.2
     # via black
 pluggy==1.4.0

dependencies/pip/requirements.in

@@ -74,6 +74,7 @@ oauthlib
 objgraph
 openpyxl
 #py-gfm # Incompatible with markdown 3.x
+pillow-heif
 psycopg
 pymongo
 python-dateutil
@@ -116,4 +117,4 @@ djangorestframework-jsonp
 pandas
 
 # Api Documentation
-drf-spectacular
+drf-spectacular

dependencies/pip/requirements.txt

@@ -359,7 +359,11 @@ openpyxl==3.1.3
 pandas==2.0.3
     # via -r dependencies/pip/requirements.in
 pillow==10.3.0
-    # via django-markdownx
+    # via
+    #   django-markdownx
+    #   pillow-heif
+pillow-heif==0.22.0
+    # via -r dependencies/pip/requirements.in
 prometheus-client==0.20.0
     # via
     #   django-prometheus

kobo/apps/openrosa/apps/logger/tests/fixtures/images/test_image.heic

@@ -55,6 +55,33 @@ def test_thumbnails(self):
                 thumbnail = f'{filename}-{size}.jpg'
                 self.assertFalse(default_storage.exists(thumbnail))
 
+    def test_heic_named_file_generates_jpg_thumbnails(self):
+        media_file_name = 'test_image.heic'
+        media_file = os.path.join(
+            os.path.dirname(os.path.dirname(__file__)),
+            'fixtures',
+            'images',
+            media_file_name
+        )
+        with open(media_file, 'rb') as f:
+            attachment = Attachment.objects.create(
+                instance=self.instance,
+                media_file=ContentFile(f.read(), name=media_file_name),
+            )
+
+        image_url(attachment, 'small')
+        for size in ['small', 'medium', 'large']:
+            filename = attachment.media_file.name.replace('.heic', '')
+            thumbnail = f'{filename}-{size}.jpg'
+            self.assertTrue(default_storage.exists(thumbnail))
+
+        # Ensure clean up of thumbnails
+        attachment.delete()
+        for size in ['small', 'medium', 'large']:
+            filename = attachment.media_file.name.replace('.heic', '')
+            thumbnail = f'{filename}-{size}.jpg'
+            self.assertFalse(default_storage.exists(thumbnail))
+
     def test_create_thumbnails_command(self):
         call_command('create_image_thumbnails')
         created_times = {}

kobo/apps/openrosa/apps/logger/tests/models/test_attachment.py

@@ -1,14 +1,17 @@
 # coding: utf-8
 from io import BytesIO
+from mimetypes import guess_type
 from tempfile import NamedTemporaryFile
 
 import requests
 from django.conf import settings
 from django.core.files.base import ContentFile
 from django.core.files.storage import FileSystemStorage
 from PIL import Image
+from pillow_heif import register_heif_opener
 
 from kobo.apps.openrosa.libs.utils.viewer_tools import get_optimized_image_path
+from kpi.constants import UNSUPPORTED_INLINE_MIMETYPES
 from kpi.deployment_backends.kc_access.storage import (
     default_kobocat_storage as default_storage,
 )
@@ -39,9 +42,16 @@ def get_dimensions(size_, longest_side):
 
 
 def _save_thumbnails(image, original_path, size, suffix):
+    img_format = image.format
+
+    # Change format to JPEG for unsupported inline mimetypes
+    mimetype, _ = guess_type(original_path)
+    if mimetype in UNSUPPORTED_INLINE_MIMETYPES:
+        img_format = 'JPEG'
+
     # Thumbnail format will be set by original file extension.
     # Use same format to keep transparency of GIF/PNG
-    nm = NamedTemporaryFile(suffix='.%s' % image.format)
+    nm = NamedTemporaryFile(suffix='.%s' % img_format)
     try:
         # Ensure conversion to float in operations
         image.thumbnail(get_dimensions(image.size, float(size)), Image.LANCZOS)
@@ -71,6 +81,7 @@ def _save_thumbnails(image, original_path, size, suffix):
 
 def resize(filename):
     image = None
+    register_heif_opener()
     if isinstance(default_storage, FileSystemStorage):
         path = default_storage.path(filename)
         image = Image.open(path)

kobo/apps/openrosa/libs/utils/image_tools.py

@@ -3,6 +3,7 @@
 import traceback
 import zipfile
 from datetime import datetime
+from mimetypes import guess_type
 from tempfile import NamedTemporaryFile
 
 import requests
@@ -13,6 +14,7 @@
 from django.utils.translation import gettext as t
 from ua_parser import user_agent_parser as ua_parse
 
+from kpi.constants import UNSUPPORTED_INLINE_MIMETYPES
 from kpi.deployment_backends.kc_access.storage import (
     default_kobocat_storage as default_storage,
 )
@@ -46,6 +48,9 @@ def get_mongo_userform_id(xform: 'logger.XForm', username: str = None) -> str:
 
 def get_optimized_image_path(path: str, suffix: str) -> str:
     file_name, ext = os.path.splitext(path)
+    mimetype, _ = guess_type(path)
+    if mimetype in UNSUPPORTED_INLINE_MIMETYPES:
+        ext = '.jpg'
     return f'{file_name}-{suffix}{ext}'
 
 

kobo/apps/openrosa/libs/utils/viewer_tools.py

@@ -169,8 +169,6 @@
     'image/jp2',
     'image/x-icon',
     'image/vnd.wap.wbmp',
-    'image/heic',
-    'image/heif',
     # audio
     'audio/mpeg',
     'audio/mp3',
@@ -200,3 +198,9 @@
     'video/x-msvideo',
     'video/x-ms-wmv',
 }
+
+# MIME types not supported inline by browsers, fallback to JPEG conversion
+UNSUPPORTED_INLINE_MIMETYPES = [
+    'image/heic',
+    'image/heif',
+]