En este tutorial de Bot de Telegram con JavaScript del lado del cliente te voy a enseñar a enviar una foto en nombre de un Bot a cualquier usuario, canal o grupo, todo esto desde JavaScript en el navegador web.

Vamos a consumir la API de Bots de Telegram en el endpoint sendPhoto enviando el chat_id, caption y photo. No necesitaremos librerías adicionales, todo será con funciones nativas como fetch.

Ya te enseñé a enviar una foto a Telegram usando cURL, ahora veremos cómo hacerlo desde la web.

Especificación de la API de Telegram

Entonces para comunicarte como si fueras un Bot de Telegram  desde JavaScript y enviar un archivo seleccionado por el usuario desde un input de tipo file, debes hacer una petición a:

https://api.telegram.org/botTOKEN/sendPhoto

Por ejemplo, si tu bot tiene el token 123:asd la URL sería:

https://api.telegram.org/bot123:asd/sendPhoto

Como ahora vamos a enviar un archivo, no vamos a usar JSON, en su lugar enviaremos los datos codificados como formulario en formato de clave=valor, ya sea el archivo binario o los otros datos como el id de chat o caption.

JavaScript cuenta con FormData que permite enviar datos codificados como si fueran un formulario, solo debemos invocar a append con cada clave y valor que se necesite enviar.

Después podemos enviar ese FormData usando fetch y los encabezados serán configurados automáticamente, teniendo como resultado el envío de la imagen desde JavaScript.

Vas a encontrar más detalles sobre sendPhoto en https://core.telegram.org/bots/api#sendphoto

Token e id

En este post asumo que ya tienes tu token del Bot, mismo que el BotFather te debió brindar. Si no, solo habla con él en https://t.me/botfather y crea un nuevo Bot para obtener tu token.

También estoy suponiendo que ya conoces el id de chat, grupo o canal. Si no lo tienes puedes obtener el id de usuario reenviando un mensaje al Bot https://t.me/get_id_bot o https://t.me/JsonDumpBot (no estoy afiliado ni tengo relación con ellos) y estoy seguro de que debe haber distintas maneras de obtenerlo

Ejemplo JavaScript: enviar foto a Telegram

Por favor presta atención a la siguiente función de JavaScript:

const enviarImagen = async (idChat, token, imagen) => {
    const url = `https://api.telegram.org/bot${token}/sendPhoto`;
    const fd = new FormData();
    fd.append("chat_id", idChat);
    fd.append("caption", "Enviado desde JS lado del cliente");
    fd.append("photo", imagen);
    const respuestaHttp = await fetch(url, {
        method: 'POST',
        body: fd,
    });
    return {
        respuesta: await respuestaHttp.json(),
        codigo: respuestaHttp.status,
    };
}

La función recibe el Id de chat como cadena, el token del bot y la imagen (instancia de File). En este caso la descripción de la imagen es indicada en el parámetro caption.

Armamos el FormData invocando a append para los 3 valores que estamos enviando.

Después se hace una petición a la URL especificando el método como POST y enviando el FormData como cuerpo. Los encabezados que indican la codificación de datos serán colocados automáticamente por fetch.

Para obtener la imagen que se va a enviar con el Bot de Telegram desde un input de tipo file primero se debe acceder a la propiedad files del elemento, mismo que es un arreglo de tipo File, y después enviar el primer elemento.

Te recuerdo que sendPhoto solo acepta una foto a la vez. Si quieres enviar más fotos debes invocar a sendMediaGroup como lo mostré en el bonus del tutorial con cURL.

Poniendo todo junto

Hasta este punto has revisado la función de JavaScript que te va a permitir consumir la API de bots de Telegram. Te voy a dejar el código completo en GitHub y, como siempre, un enlace a la demostración para que puedas probar por ti mismo.