Convert File HEIC ke JPG di React File Upload

Kapan sih Kita Perlu Pake Konversi HEIC ke JPG di React?

High Efficiency Image Format (HEIC) tuh terkenal karena compression-nya yang bagus dan kualitas gambar yang lebih oke dibanding JPEG. Tapi nih, aplikasi web biasanya lebih butuh format JPEG karena lebih compatible sama browser dan third-party service. Nah, makanya kita perlu bikin solusi yang smooth buat konversi file HEIC ke JPG pas lagi upload, biar user experience dan system compatibility-nya makin mantep.

Kenapa Sih Ini Jadi Masalah?

Format HEIC yang banyak dipake sama device Apple tuh bikin developer web pusing. Soalnya banyak browser modern yang belum support HEIC, jadi mau ga mau kita harus konversi ke format JPG yang lebih universal.

Baca Juga: Bikin Universal Social Media Embed Component di React Jodit

Implementasi: Bikin React Component buat File Upload dan Konversi

Nih, gue kasih guide step-by-step buat implementasi file upload di aplikasi React lo, sekalian sama fitur konversi otomatis dari HEIC ke JPG.

import React, { useState } from "react";
import {
    Modal,
    ModalOverlay,
    ModalContent,
    ModalHeader,
    ModalFooter,
    ModalBody,
    ModalCloseButton,
    Button,
    useToast,
    Input,
    Progress,
    Alert,
    AlertIcon,
} from "@chakra-ui/react";
import { useDropzone } from "react-dropzone";
import heic2any from "heic2any";

const MAX_FILE_SIZE = 2 * 1024 * 1024;

export default function UploadMedia({ isOpen, onClose }) {
    const [files, setFiles] = useState([]);
    const [uploadProgress, setUploadProgress] = useState(0);
    const [isLoading, setIsLoading] = useState(false);
    const toast = useToast();

    const handleDrop = async (acceptedFiles) => {
        const processedFiles = [];

        for (const file of acceptedFiles) {
            if (file.size > MAX_FILE_SIZE) {
                toast({
                    title: "File Too Large",
                    description: `File ${file.name} exceeds 2MB limit`,
                    status: "error",
                    duration: 7000,
                    position: "top",
                    isClosable: true,
                });
                continue;
            }

            if (file.type === "image/heic") {
                try {
                    setIsLoading(true);
                    const convertedBlob = await heic2any({
                        blob: file,
                        toType: "image/jpeg",
                    });
                    const convertedFile = new File(
                        [convertedBlob],
                        file.name.replace(/\.heic$/i, ".jpg"),
                        {
                            type: "image/jpeg",
                        }
                    );
                    processedFiles.push(convertedFile);
                } catch (error) {
                    toast({
                        title: "Conversion Error",
                        description: `Failed to convert ${file.name}`,
                        status: "error",
                        duration: 7000,
                        position: "top",
                        isClosable: true,
                    });
                } finally {
                    setIsLoading(false);
                }
            } else {
                processedFiles.push(file);
            }
        }

        setFiles((prevFiles) => [...prevFiles, ...processedFiles]);
    };

    const { getRootProps, getInputProps } = useDropzone({
        onDrop: handleDrop,
        accept: {
            "image/*": [".jpeg", ".png", ".jpg", ".gif", ".webp", ".heic"],
        },
        maxFiles: 10,
    });

    return (
        <Modal isOpen={isOpen} onClose={onClose} size="lg">
            <ModalOverlay />
            <ModalContent>
                <ModalHeader>Upload Media</ModalHeader>
                <ModalCloseButton />
                <ModalBody>
                    <div {...getRootProps()} className="dropzone">
                        <input {...getInputProps()} />
                        <p>Drag & drop files here, or click to select files.</p>
                    </div>

                    {isLoading && (
                        <Progress
                            value={uploadProgress}
                            size="sm"
                            colorScheme="blue"
                            mb={4}
                        />
                    )}

                    {files.map((file, index) => (
                        <Alert status="info" key={index} mt={2}>
                            <AlertIcon />
                            {file.name} - {file.type === "image/jpeg" ? "Converted to JPG" : "Uploaded as is"}
                        </Alert>
                    ))}
                </ModalBody>
                <ModalFooter>
                    <Button
                        colorScheme="blue"
                        mr={3}
                        onClick={onClose}
                        disabled={isLoading}
                    >
                        Close
                    </Button>
                </ModalFooter>
            </ModalContent>
        </Modal>
    );
}

Best Practices Buat Image Conversion di React

1. User Experience: Kasih alert atau message yang jelas buat ngasih tau user tentang proses konversinya.
2. Efficiency: Batasi ukuran file biar upload-nya ga lama-lama.
3. Compatibility: Konversi gambar ke format yang support di banyak browser.

Kesimpulan

Nah, dengan nge-manage upload dan konversi gambar yang efisien di aplikasi React, user experience bakal makin oke dan aplikasi lo bakal lebih compatible sama berbagai platform. Implementasi konversi otomatis dari HEIC ke JPEG bikin handling format gambar modern jadi lebih gampang, sambil tetep jaga kualitas dan ngurangin masalah compatibility. Dengan pake tools kayak heic2any dan Chakra UI buat design elements yang intuitif, developer bisa bikin solusi yang robust dan user-friendly.

Baca Juga: Migrasi dari Bootstrap ke Tailwind CSS: Perjalanan Gue

Buat lo yang pengen optimize file management lebih jauh lagi, lo bisa tambahin fitur-fitur keren kayak interface drag-and-drop, preview file, dan custom naming. Dengan approach yang tepat dalam media management, aplikasi lo bakal makin polished dan professional.