Web / HTML API Integration

Recommended Integration Flow

For maximum security, your API key should never be exposed directly inside frontend JavaScript code.

HTML Upload Form

Create a simple upload interface that allows users to select and upload images.

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

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

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

Frontend JavaScript

Send uploaded images securely to your backend endpoint using JavaScript fetch requests.

async function removeBg(){

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

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

    if(!fileInput.files.length){
        alert("Select image");
        return;
    }

    const formData = new FormData();

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

    result.innerHTML = "Processing...";

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

    if(!response.ok){

        result.innerHTML =
        "Something went wrong";

        return;
    }

    const blob =
    await response.blob();

    const url =
    URL.createObjectURL(blob);

    result.innerHTML = `
        <img src="${url}">
    `;
}

Backend Responsibilities

• Store API keys securely on the server.
• Validate uploaded image files properly.
• Send secure API requests to ByByBG servers.
• Return processed transparent PNG images.
• Handle API errors and invalid requests correctly.

Important Security Rules

• Use secure backend proxy endpoints.
• Store API keys in environment variables.
• Validate uploads on the server side.
• Apply upload size limits for security.
• Prevent abuse using rate limiting systems.

Common API Errors