How to convert HEIC/HEIF image to what ever in ReactJs

3.5k views Asked by At

At the moment I am using the upload file component provided by antd

enter image description here

Also I am using a library to transform HEIC to JPG ... this library is called heic2any, and the truth works quite well, basically, it fulfills its objective, this is the code that im using

this is my code so far:

const handleChange = (info) => {
    setLoading(true);
    setimageUrl(null);
    if (info.file.originFileObj.type === "") {
      fetch(URL.createObjectURL(info.file.originFileObj))
        .then((res) => res.blob())
        .then((blob) => heic2any({ blob, toType: "image/jpeg" }))
        .then((conversionResult) => {
          console.log("HEIC");
          setimageUrl(URL.createObjectURL(conversionResult));
          setLoading(false);
        })
        .catch((e) => {
          console.log("error");
          setLoading(false);
        });
    } else {
      setLoading(false);
      setimageUrl(URL.createObjectURL(info.file.originFileObj));
    }
  };

My problem occurs the moment a HEIF file arrives ... because the library does not accept that format, it only allows HEIC ... but what happens I also have no way of knowing what type of file is being uploaded to avoid failure, due to Why, when I ask for a HEIF or HEiC type photo, these are the data that the input gives me: TYPE HEIF enter image description here

Type HEIC

enter image description here

for none of these cases, I can recognize the type of file that is being loaded so I have no way to validate it ... what can I do in this case? Do you know any library that allows me to upload HEIC and HEIF photos? maybe not load, at least convert to another format and with that allows me to show a preview

0

There are 0 answers