kobotoolbox / kpi / 28667492961

81%

master: 76%

push

github

fix(gallery): heic images not being displayed DEV-2105 (#7206)

### 📣 Summary

HEIC images now show up in the Project → Data → Gallery view.

### 💭 Notes

Changes here:
- **`formGallery.selectors.ts`** — Added `image/heic` and `image/heif`
to the allowed image types so they pass the frontend filter
- **`formGallery.component.tsx`** — Modal now uses `download_large_url`
(1280px JPEG thumbnail) instead of `download_url` (the original file) to
display images

The backend already converts HEIC/HEIF to JPEG thumbnails (small: 240px,
medium: 640px, large: 1280px) while keeping the original file intact.
The gallery grid was fine because it uses `download_small_url`, but the
modal was trying to show the original HEIC file, which browsers can't
render. Now it shows the large JPEG version instead.

### 👀 Preview steps

1. ℹ️ You'll need a project with image question and file question
2. Make a submission with heic image https://heic.digital/samples/ and
heif file https://convertico.com/samples/heif/
3. Go to Project → Data → Gallery
4. 🔴 [on main] HEIC and HEIF images don't appear in the gallery grid at
all
5. 🟢 [on PR] Both images appears as thumbnails in the gallery grid
6. Click on the HEIC/HEIF image thumbnail
7. 🔴 [on main] N/A
8. 🟢 [on PR] The image displays properly in the modal at 1280px
resolution
9. Navigate between images with the arrow buttons to confirm everything
still works

HEIF images are unfortunately not testable through `image` question, as
Enketo doesn't allow uploading them to `image` questions. Thus we use
the `file` question hack/feature.

9261 of 12601 branches covered (73.49%)

30225 of 37112 relevant lines covered (81.44%)

5.52 hits per line