Hello Bright,

If possible you can convert the files into another format via Java action, or as alternative convert via API connection on the upload so you store them as a compatible formats for mendix like PNG or JPEG.

If this is not possible for your use case, I've tried with other formats to embed using the Iframe Widget from the marketplace: Mendix Marketplace - IFrame Component
You can this way call an URL and display the HEIC files direcly embeded in Mendix.

Hope this helps.

You can handle this by converting the HEIC image to JPEG on the client side using a JavaScript action before saving the file.

A common approach is to use a browser-based library such as heic2any. When the user selects a HEIC image, the JavaScript action converts the file to a JPEG blob directly in the browser. After the conversion is completed, you can upload and store the JPEG version in Mendix and display it normally using the standard Image Viewer widget.

The typical flow is: User selects a HEIC file → JavaScript action converts it to JPEG → the JPEG file is saved → the application displays the converted image.

This approach avoids the need for backend or external conversion services. However, keep in mind that very large HEIC files may take longer to process since the conversion happens in the browser. 

or

If conversion is not an option, you can simply restrict uploads to JPG/PNG and show a message like:

“HEIC is not supported. Please convert to JPG/PNG before uploading.” :)

If this resolves the issue, please mark the answer as accepted.

Hi Bright Amalraj

The best and only practical solution to allow users to view HEIC files in Mendix is to convert the files to JPEG, because Mendix and browsers cannot display HEIC directly. Below the ready to use JS, I tested it works fine.

I hope this helps

Inputs (create these in the JS Action):

fileDoc — Object (your System.Image or System.FileDocument instance)

sourceFile — Any (the browser File / Blob from your upload widget)

quality — Decimal (optional) (0.0–1.0, default 0.85)

// Single-function JS Action for Mendix: Convert HEIC→JPEG and upload to FileDocument/Image
// Inputs: fileDoc (MxObject), sourceFile (File/Blob), quality (Decimal, optional)
// Output: Boolean (true on success)

async function main(fileDoc, sourceFile, quality) {
  if (!fileDoc || !sourceFile) {
    throw new Error("Both 'fileDoc' (MxObject) and 'sourceFile' (File/Blob) are required.");
  }

  // Decide if conversion is needed based on MIME or filename
  const mime = (sourceFile.type || "").toLowerCase();
  const name = typeof sourceFile.name === "string" ? sourceFile.name : "image.heic";
  const isHeic = mime.includes("heic") || mime.includes("heif") || /\.hei[cf]$/i.test(name);
  const q = Math.min(Math.max((quality ?? 0.85), 0), 1);

  // Compute target filename
  const targetFileName = (isHeic ? name.replace(/\.[^/.]+$/, "") : name.replace(/\.[^/.]+$/, "")) + ".jpg";

  // Convert if HEIC, otherwise pass-through
  let targetBlob = sourceFile;

  if (isHeic) {
    // Lazy-load heic2any only when needed
    if (!window.heic2any) {
      await new Promise((resolve, reject) => {
        const s = document.createElement("script");
        s.src = "https://unpkg.com/heic2any@0.0.4/dist/heic2any.min.js";
        s.async = true;
        s.onload = resolve;
        s.onerror = () => reject(new Error("Failed to load HEIC converter (heic2any)."));
        document.head.appendChild(s);
      });
    }

    try {
      const output = await window.heic2any({ blob: sourceFile, toType: "image/jpeg", quality: q });
      const one = Array.isArray(output) ? output[0] : output;
      targetBlob = new Blob([one], { type: "image/jpeg" });
    } catch (e) {
      console.error("HEIC → JPEG conversion failed:", e);
      throw new Error("HEIC conversion failed. Try a smaller image or different file.");
    }
  }

  // Ensure MIME is set for non-HEIC pass-through (optional)
  if (!isHeic && !(targetBlob.type || "").startsWith("image/")) {
    // If the original file had no type, default to JPEG to help viewers
    targetBlob = new Blob([targetBlob], { type: "image/jpeg" });
  }

  // Set the Name attribute if available (optional)
  try {
    if (typeof fileDoc.has === "function" && fileDoc.has("Name")) {
      fileDoc.set("Name", targetFileName);
    }
  } catch (e) {
    // Non-fatal
    console.warn("Could not set Name on FileDocument:", e);
  }

  // Try modern saveDocument: mx.data.saveDocument(guid, name, { blob, mimeType }, onload, onerror)
  const guid = fileDoc.getGuid ? fileDoc.getGuid() : fileDoc?.guid;
  if (!guid) throw new Error("Invalid Mendix object: GUID not found.");

  try {
    await new Promise((resolve, reject) => {
      mx.data.saveDocument(
        guid,
        targetFileName,
        { blob: targetBlob, mimeType: targetBlob.type || "image/jpeg" },
        resolve,
        reject
      );
    });
    return true;
  } catch (modernErr) {
    // Fallback to legacy saveDocument: mx.data.saveDocument(guid, name, mime, base64, ...)
    console.warn("Modern saveDocument failed or not available, falling back to legacy:", modernErr);

    const base64 = await new Promise((resolve, reject) => {
      const r = new FileReader();
      r.onload = () => resolve(String(r.result).split(",")[1]);
      r.onerror = reject;
      r.readAsDataURL(targetBlob);
    });

    await new Promise((resolve, reject) => {
      mx.data.saveDocument(
        guid,
        targetFileName,
        targetBlob.type || "image/jpeg",
        base64,
        resolve,
        reject
      );
    });

    return true;
  }
}

return main(fileDoc, sourceFile, quality);

Hi Bright Amalraj

To make this more simple I have builded a custom widget for WEB where you can pass the file document object to preview the HEIC images. Download it from mendix marketplace HEIC Viewer

Thanks for the Idea ! and I hope this helps!

Hi,

You are correct that HEIC is not natively supported by Mendix for previewing or rendering images. The File Manager can upload the file, but Mendix cannot display it because the platform relies on browser-supported formats (PNG, JPG, GIF, etc.), and most browsers do not render HEIC directly.

The typical solution is to convert the HEIC file to a supported format (usually JPEG or PNG) before displaying it. There are a few practical approaches used in Mendix projects:

1. Convert the file on the server side (recommended)

When the HEIC file is uploaded, trigger a Java action or external service to convert it to JPEG/PNG and store the converted file as a new FileDocument. Libraries such as ImageIO plugins or ImageMagick can be used in a custom Java action. After conversion, the application simply displays the converted image.

2. Use an external conversion API

Another common approach is sending the uploaded HEIC file to an external image conversion service (for example CloudConvert or a similar API). The service returns the image in JPEG/PNG format, which can then be stored and displayed in Mendix.

3. Convert on the client side before upload

If the images mainly come from mobile devices (iOS), you can convert the file in the browser using JavaScript libraries such as heic2any before sending it to Mendix. The converted JPEG is then uploaded instead of the original HEIC file.

In most Mendix applications, the server-side conversion during upload is the most stable solution because it ensures that the stored file is always in a format that Mendix and browsers can display.

So the usual pattern is:

Upload HEIC → Convert to JPEG/PNG → Store converted FileDocument → Display image normally in Mendix.