Not able to convert HEIC Image to JPEG using custom plugin

Here I have created custom plugin to convert HEIC Image to JPEG using custom plugin. In which install method is called and I am getting info logs but not getting any info logs from from prepareUpload method.

here is the code

import { Plugin } from "@uppy/core";
import convert from "heic-convert";

class UppyHEICImageConversion extends Plugin {
  constructor(uppy, opts) {
    super(uppy, opts);
    this.id = this.opts.id || "HEICImageConversion";
    this.type = "modifier";

    this.prepareUpload = this.prepareUpload.bind(this);
    this.conversion = this.conversion.bind(this);
  }

  async conversion(currentFile) {
    if (
      currentFile.name.split(".").pop() === "HEIC" ||
      currentFile.name.split(".").pop() === "heic"
    ) {
      let base64String = new Promise((resolve, reject) => {
        const reader = new FileReader();
        reader.readAsDataURL(currentFile.data);
        reader.onload = () => resolve(reader.result);
        reader.onerror = (error) => reject(error);
      });

      base64String = base64String.split(";base64,")[1];
      let inputBuffer = Buffer.from(base64String, "base64");

      const outputBuffer = await convert({
        buffer: inputBuffer, // the HEIC file buffer
        format: "JPEG", // output format
        quality: 1, // the jpeg compression quality, between 0 and 1
      });

      currentFile.convertHEICToJPG = outputBuffer;

      if (!currentFile.convertHEICToJPG) {
        return false;
      } else {
        let blob = new Blob([currentFile.convertHEICToJPG]);
        currentFile.data = new File([blob], "abc.jpg", {
          type: "image/jpeg",
        });
      }
    }
    return currentFile;
  }

  prepareUpload(fileIDs) {
    this.uppy.info("prepareUpload called!", "success", 3000);
    const promises = fileIDs.map(async (fileID) => {
      const file = this.uppy.getFile(fileID);

      if (file.type.split("/")[0] !== "image") {
        return;
      }

      return this.conversion(file)
        .then((jpegImage) => {
          this.uppy.setFileState(fileID, { data: jpegImage });
        })
        .catch((err) => {
          this.uppy.log(
            `HEIC Image conversion to JPEG Failed ${file.id}:`,
            "warning"
          );
          this.uppy.log(err, "warning");
        });
    });

    const emitPreprocessCompleteForAll = () => {
      fileIDs.forEach((fileID) => {
        const file = this.uppy.getFile(fileID);
        this.uppy.emit("preprocess-complete", file);
      });
    };

    // Why emit `preprocess-complete` for all files at once, instead of
    // above when each is processed?
    // Because it leads to StatusBar showing a weird “upload 6 files” button,
    // while waiting for all the files to complete pre-processing.
    return Promise.all(promises).then(emitPreprocessCompleteForAll);
  }

  install() {
    this.uppy.info("Oh my, something good happened!", "success", 3000);
    this.uppy.addPreProcessor(this.prepareUpload);
  }
}

export default UppyHEICImageConversion;

P.S I am using this plugin so that I can enable HEIC preview in uppy as converting it into jpeg and able to edit also using image editor

[Murderlon]

@nisha-parikh this is a limitation in the library we are using (see https://github.com/transloadit/uppy/pull/2838#issuecomment-855801123). But if I’m correct, you should still be able to control zoom with the zoom (magnifying glass icon) buttons.

[Murderlon]

This question about your custom plugin seems to be solved. Regarding the CSS selector, I’m not sure what kind of effect you want to implement so it’s hard to pin point. Closing this, but discussion can continue.