How to handle heic files

[twigs67]

Maybe I missed it, but I don't see a way of handling .heic (Apple) files. In other libs, its seems like you can alter the file name to convert it, but the file is immutable onDrop.

[stale]

This issue has been automatically marked as stale because it has not had recent activity in the past 60 days. It will be closed if no further activity occurs. If the problem persists please comment here to bump your issue. Thank You - React Dropzone Maintaners

[rafael-vitor]

@twigs67 have you found a solution?

[kluplau]

HEIC is standard format for images taken by an iPhone. Shouldn't this be supported in react-dropzone?

[WebMasterSam]

Same concern here. Since it's easily handled in the backend (converting it to JPG for example), this component should accept this file type (HEIC and HEIF) as images.

[rolandjitsu]

@WebMasterSam I'm not quite sure what the issue is. This lib does not process files. Could someone explain?

[WebMasterSam]

I have a dropzone, added the "image/heic" and "image/heif" as accepted content types. Dragging a file always gets on the fileRejection handler...

[rolandjitsu]

I have a dropzone, added the "image/heic" and "image/heif" as accepted content types. Dragging a file always gets on the fileRejection handler...

Well, the type is not available and you're validating by MIME type. This is probably a browser issue as it doesn't recognise that type.

We do keep a list of known file extensions and then we set the MIME type in react-dropzone/file-selector, so you could make a PR and add these to the list.

[ahnaf-abir]

I had a similar issue with react-dropzone version 12.0.2, had to downgrade to 11.3.0 to fix the issue.

[syedmahmad]

Please re open this issue. This issue still exist.
Here is my user case:

• dropZone is working fine on all desktop browsers.
• Same dropZone not working on mobile browsers. In mobile, we are not getting type of heic, heif images. All other image types are working fine.

NOTE: I even downgrade and try different versions but issue still same.

[vasilvestre]

I don't have preview of these files, I wonder if I do something wrong here or if extra code is needed

[MattHalloran]

I was able to add heic support by using heic2any. Here's what it looks like:

    const [profileImg, setProfileImg] = useState(defaultImg);

    const handleImagePreview = async (file: any) => {
        // Extract extension from file name or path
        const ext = (file.name ? file.name.split(".").pop() : file.path.split(".").pop()).toLowerCase();
        // If heic or heif, convert to jpeg
        if (ext === "heic" || ext === "heif") {
            // Dynamic import of heic2any
            const heic2any = (await import("heic2any")).default;

            // Convert HEIC/HEIF file to JPEG Blob
            const outputBlob = await heic2any({
                blob: file,  // Use the original file object
                toType: "image/jpeg",
                quality: 0.7, // adjust quality as needed
            }) as Blob;
            // Return as object URL
            return URL.createObjectURL(outputBlob);
        } else {
            // If not a HEIC/HEIF file, proceed as normal
            return URL.createObjectURL(file);
        }
    };

    const { getRootProps, getInputProps } = useDropzone({
        accept: ["image/*", ".heic", ".heif"],
        maxFiles: 1,
        onDrop: async acceptedFiles => {
            if (acceptedFiles.length <= 0) {
                console.error("No files were uploaded");
                return;
            }

            const previews = await Promise.all(
                acceptedFiles.map(file =>
                    handleImagePreview(file).then(preview =>
                        Object.assign(file, { preview }),
                    ),
                ),
            );

            setFiles(previews);
            onChange(acceptedFiles[0]);
        },
    });

    // Update profile image after file has been uploaded
    useEffect(() => {
        if (files.length > 0) {
            setProfileImg(files[0].preview);
        }
    }, [files]);
    
    //...
    return (
    <input name="profile" {...getInputProps()} />
    )
    ```

[Sahal-P]

I was able to add heic support by using heic2any. Here's what it looks like:

    const [profileImg, setProfileImg] = useState(defaultImg);

    const handleImagePreview = async (file: any) => {
        // Extract extension from file name or path
        const ext = (file.name ? file.name.split(".").pop() : file.path.split(".").pop()).toLowerCase();
        // If heic or heif, convert to jpeg
        if (ext === "heic" || ext === "heif") {
            // Dynamic import of heic2any
            const heic2any = (await import("heic2any")).default;

            // Convert HEIC/HEIF file to JPEG Blob
            const outputBlob = await heic2any({
                blob: file,  // Use the original file object
                toType: "image/jpeg",
                quality: 0.7, // adjust quality as needed
            }) as Blob;
            // Return as object URL
            return URL.createObjectURL(outputBlob);
        } else {
            // If not a HEIC/HEIF file, proceed as normal
            return URL.createObjectURL(file);
        }
    };

    const { getRootProps, getInputProps } = useDropzone({
        accept: ["image/*", ".heic", ".heif"],
        maxFiles: 1,
        onDrop: async acceptedFiles => {
            if (acceptedFiles.length <= 0) {
                console.error("No files were uploaded");
                return;
            }

            const previews = await Promise.all(
                acceptedFiles.map(file =>
                    handleImagePreview(file).then(preview =>
                        Object.assign(file, { preview }),
                    ),
                ),
            );

            setFiles(previews);
            onChange(acceptedFiles[0]);
        },
    });

    // Update profile image after file has been uploaded
    useEffect(() => {
        if (files.length > 0) {
            setProfileImg(files[0].preview);
        }
    }, [files]);
    
    //...
    return (
    <input name="profile" {...getInputProps()} />
    )
    ```

this is taking longer to process
is there any efficient way