Integrasi JavaScript

Alur Kerja Unggah JavaScript

JavaScript dapat mengunggah gambar, mengirim permintaan ke endpoint backend, dan menampilkan gambar hasil pemrosesan AI secara instan di dalam aplikasi web.

Struktur HTML

Buat kolom unggah gambar sederhana dan wadah hasil untuk pengguna.

<input type="file"
id="imageInput">

<button onclick="removeBg()">
    Remove Background
</button>

<div id="result"></div>

Contoh JavaScript Fetch API

Unggah gambar menggunakan permintaan JavaScript async dan tampilkan hasil PNG yang telah diproses secara instan.

async function removeBg(){

    const fileInput =
    document.getElementById("imageInput");

    const result =
    document.getElementById("result");

    if(!fileInput.files.length){

        alert("Select image first");

        return;
    }

    const formData = new FormData();

    formData.append(
        "file",
        fileInput.files[0]
    );

    result.innerHTML =
    "Processing...";

    try{

        const response = await fetch(
            "/ajax/remove-bg.php",
            {
                method:"POST",
                body:formData
            }
        );

        if(!response.ok){
            throw new Error();
        }

        const blob =
        await response.blob();

        const url =
        URL.createObjectURL(blob);

        result.innerHTML = `
            <img src="${url}"
            style="max-width:100%;">

            <br><br>

            <a href="${url}"
            download="no-bg.png">
                Download PNG
            </a>
        `;

    }catch{

        result.innerHTML =
        "Something went wrong";

    }
}

Fitur UI yang Direkomendasikan

• Unggah dengan drag and drop.
• Indikator progres dan loader.
• Pratinjau gambar sebelum unggah.
• Animasi status pemrosesan.
• Tombol unduh untuk gambar PNG.
• Pesan penanganan kesalahan yang ramah pengguna.

Rekomendasi Keamanan

• Gunakan endpoint proxy backend untuk permintaan API.
• Validasi gambar yang diunggah di sisi server.
• Terapkan batas ukuran unggahan.
• Batasi format gambar yang tidak didukung.
• Gunakan rate limiting dan request throttling.

Kesalahan JavaScript Umum