Skip to content

Heic/Heif auto convert#724

Merged
feruzm merged 3 commits into
developfrom
heic
Mar 30, 2026
Merged

Heic/Heif auto convert#724
feruzm merged 3 commits into
developfrom
heic

Conversation

@feruzm
Copy link
Copy Markdown
Member

@feruzm feruzm commented Mar 30, 2026

Summary by CodeRabbit

  • New Features

    • HEIC/HEIF images are now accepted across upload flows (file picker, drag‑drop, paste, editor) and are automatically converted to JPEG before upload.
    • Improved upload error handling so failures are surfaced/callbacks are invoked.
  • UI Improvements

    • Adjusted bottom padding in the chat message view for better spacing on mobile devices.

@coderabbitai
Copy link
Copy Markdown
Contributor

coderabbitai Bot commented Mar 30, 2026

Caution

Review failed

The pull request is closed.

ℹ️ Recent review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: b30858bd-9ace-42fe-ba07-2984866ff1d0

📥 Commits

Reviewing files that changed from the base of the PR and between e84a5e2 and 09c5dab.

📒 Files selected for processing (1)
  • apps/web/src/features/ecency-images/ecency-images-upload-form.tsx

📝 Walkthrough

Walkthrough

Adds HEIC/HEIF upload support: new conversion utility that detects and converts HEIC/HEIF files to JPEG, integrates conversion into multiple upload components, updates accepted file types, tweaks chat message-list padding, and adds heic2any dependency.

Changes

Cohort / File(s) Summary
HEIC/HEIF Conversion Utility
apps/web/src/utils/convert-heic.ts
New module exporting isHeicFile() and convertHeicToJpeg() that dynamically imports heic2any, converts HEIC/HEIF to image/jpeg (~92% quality), normalizes result to a File with .jpg extension; non‑HEIC files passthrough.
Upload UI & Flows
apps/web/src/features/shared/image-upload-button.tsx, apps/web/src/features/shared/editor-toolbar/index.tsx, apps/web/src/features/ecency-images/ecency-images-upload-dialog.tsx, apps/web/src/features/waves/components/wave-form/wave-form-toolbar-image-picker.tsx
Components now call convertHeicToJpeg() before upload; ImageUploadButton accepts optional onError and invokes it on conversion/upload failure.
Upload Form Accept Rules
apps/web/src/features/ecency-images/ecency-images-upload-form.tsx
Updated input accept and drag/drop extension allowlist to include .heic and .heif (and added image/heic, image/heif, image/svg+xml tokens).
Chat styling tweak
apps/web/src/features/chat/mattermost-channel-view.tsx
Message-list wrapper now has responsive bottom padding: pb-[72px] on small viewports and md:pb-0 for md+.
Dependencies & Package metadata
apps/web/package.json, package.json
Added heic2any@^0.0.4 to apps/web dependencies; cleaned/reordered some root devDependencies entries (no version changes beyond relocation).

Sequence Diagram

sequenceDiagram
    actor User
    participant FileInput as File Input
    participant Detector as HEIC Detector
    participant Converter as HEIC→JPEG Converter
    participant Uploader as Upload Mutation
    participant Server as Server

    User->>FileInput: Select / drop file
    FileInput->>Detector: Provide File object
    Detector-->>Detector: Check MIME type / extension
    alt File is HEIC/HEIF
        Detector->>Converter: Convert file
        Converter->>Converter: Dynamically import heic2any
        Converter->>Converter: Convert blob → image/jpeg (0.92)
        Converter->>Converter: Create new .jpg File
        Converter-->>Uploader: Return converted File
    else Not HEIC/HEIF
        Detector-->>Uploader: Return original File
    end
    Uploader->>Server: Upload File
    Server-->>Uploader: Return URL
    Uploader-->>User: Show uploaded image / update UI
Loading

Estimated code review effort

🎯 3 (Moderate) | ⏱️ ~20 minutes

Possibly related PRs

Suggested labels

patch

Poem

🐰 Hop-hop, a pixel parade,

HEIC hops in, then JPEG is made,
heic2any hums, conversion at play,
Uploads march on, no format astray,
🥕✨

🚥 Pre-merge checks | ✅ 2 | ❌ 1

❌ Failed checks (1 warning)

Check name Status Explanation Resolution
Docstring Coverage ⚠️ Warning Docstring coverage is 0.00% which is insufficient. The required threshold is 80.00%. Write docstrings for the functions missing them to satisfy the coverage threshold.
✅ Passed checks (2 passed)
Check name Status Explanation
Description Check ✅ Passed Check skipped - CodeRabbit’s high-level summary is enabled.
Title check ✅ Passed The title accurately summarizes the main objective of the pull request: adding automatic HEIC/HEIF image format conversion to JPEG across multiple upload components.

✏️ Tip: You can configure your own custom pre-merge checks in the settings.

✨ Finishing Touches
📝 Generate docstrings
  • Create stacked PR
  • Commit on current branch
🧪 Generate unit tests (beta)
  • Create PR with unit tests
  • Commit unit tests in branch heic

Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out.

❤️ Share

Comment @coderabbitai help to get the list of available commands and usage tips.

coderabbitai[bot]

This comment was marked as resolved.

Copy link
Copy Markdown
Contributor

@coderabbitai coderabbitai Bot left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Actionable comments posted: 2

🤖 Prompt for all review comments with AI agents
Verify each finding against the current code and only fix it if needed.

Inline comments:
In `@apps/web/src/features/ecency-images/ecency-images-upload-form.tsx`:
- Line 65: In the ecency-images-upload-form.tsx input element (the accept prop
on the file input in the EcencyImagesUploadForm component), replace the
non-standard token "image/svg" with a valid SVG token such as "image/svg+xml"
and/or include the extension ".svg" (e.g., ".svg,image/svg+xml") to ensure the
file picker recognizes SVGs consistently; update the accept string accordingly
so it contains either or both valid tokens instead of "image/svg".
- Around line 23-25: Replace the non-null assertion on fileExtension by
explicitly guarding it: compute fileExtension (e.g., const fileExtension =
file?.name.split(".").pop()?.toLowerCase()) and change the conditional to first
verify fileExtension is defined before calling includes (for example: if (file
&& fileExtension &&
["png","svg","jpg","jpeg","webp","gif","heic","heif"].includes(fileExtension)) {
files.push(file); }). Update the check around the files.push call (in
ecency-images-upload-form.tsx where fileExtension and files are used) to remove
the "!" and ensure fileExtension is truthy before using it.
🪄 Autofix (Beta)

Fix all unresolved CodeRabbit comments on this PR:

  • Push a commit to this branch (recommended)
  • Create a new PR with the fixes

ℹ️ Review info
⚙️ Run configuration

Configuration used: Organization UI

Review profile: CHILL

Plan: Pro

Run ID: 1160c7bc-e162-465d-ae94-7ed87ae4d571

📥 Commits

Reviewing files that changed from the base of the PR and between 4ebea46 and e84a5e2.

⛔ Files ignored due to path filters (1)
  • pnpm-lock.yaml is excluded by !**/pnpm-lock.yaml
📒 Files selected for processing (7)
  • apps/web/package.json
  • apps/web/public/sw.js
  • apps/web/src/features/ecency-images/ecency-images-upload-dialog.tsx
  • apps/web/src/features/ecency-images/ecency-images-upload-form.tsx
  • apps/web/src/features/shared/image-upload-button.tsx
  • apps/web/src/utils/convert-heic.ts
  • package.json
✅ Files skipped from review due to trivial changes (3)
  • package.json
  • apps/web/package.json
  • apps/web/src/utils/convert-heic.ts
🚧 Files skipped from review as they are similar to previous changes (2)
  • apps/web/src/features/shared/image-upload-button.tsx
  • apps/web/src/features/ecency-images/ecency-images-upload-dialog.tsx

Comment thread apps/web/src/features/ecency-images/ecency-images-upload-form.tsx
Comment thread apps/web/src/features/ecency-images/ecency-images-upload-form.tsx Outdated
@feruzm feruzm merged commit 40e51dd into develop Mar 30, 2026
1 check was pending
@feruzm feruzm deleted the heic branch March 30, 2026 08:06
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

1 participant