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.
