CODEWITHSUNDEEP
javascripthtmlformstelegram
Clovis Nyu
Clovis Nyu

Reputation: 27

Sending Image via Telegram Bot

I want to send a local image file to a user via a bot in Telegram, but can't seem to figure out how to do it.

The Telegram website states that to do this, I should use multipart/form-data and send the image in the "usual way". After looking up multipart/form-data, I am currently trying to upload the file to a form and send the form data to the Telegram API. 

let form = document.createElement("FORM");

form.setAttribute("action", "https://api.telegram.org/bot{some token}/sendMessage");
form.setAttribute("method", "POST");
form.setAttribute("id", "f");
form.setAttribute("enctype", "multipart/form-data");

let file = document.createElement("input");

file.setAttribute("type", "file");
file.setAttribute("value", "\some\local\path");
file.setAttribute("id", "file");


let text = document.createElement("input");

text.setAttribute("type", "text");
text.setAttribute("name", "text");
text.setAttribute("value", '"test"');

let ID = document.createElement("input");

ID.setAttribute("type", "text");
ID.setAttribute("name", "chat_ID")
ID.setAttribute("value", "123456789");

let s = document.createElement("input");

s.setAttribute("type", "submit");

form.appendChild(text);
form.appendChild(ID);
form.appendChild(s);
form.appendChild(file);

document.getElementsByTagName("body")[0].appendChild(form);

var formJSON = $("form").serializeArray();
console.log(formJSON);

var j = "{"
for (let i = 0; i < formJSON.length; i++) {
  j += '"' + (formJSON[i]["name"]) + '"' + ":" + (formJSON[i]["value"]);
  if (i != formJSON.length - 1) {
    j += ",";
  }
}
j += "}";

jP = JSON.parse(String(j));
console.log(document.getElementById("file").files);

form.setAttribute("action", "https://api.telegram.org/bot{some token}/sendPhoto?" + "chat_id=" + (jP["chat_ID"]) + "&photo=" + "\some\local\path");
document.getElementById("f").submit();
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.6.2/angular.min.js"></script>
<!DOCTYPE html>
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery/jquery-1.6.2.min.js" />

<head>
  <meta charset="utf-8" />
  <title>This is a test</title>
</head>

<body>

</body>
<script src="formData.js" />

</html>

Currently I'm not sure if the file is being uploaded as when I run the HTML on Chrome, there is no file selected and fileList is empty. Also, Telegram insists on having the data sent as a JSON (which is why I parsed the form data into a JSON). I tried passing the local file path but it seems to think I'm trying to find a file id on the Telegram servers. I'm not really sure how to proceed from here.

Upvotes: 0

Views: 4982

Answers (1)

abdullah
abdullah

Reputation: 11

if you use this code , it well done : 

<form method="POST" action="https://api.telegram.org/<YOU_TOKEN>/sendPhoto" enctype="multipart/form-data">

  chat ID
  <input type="text" name="chat_id" value="72XXXX61" />
  <br/>
  
  caption(comment on photo)
  <input type="text" name="caption" value="hi world"/>
  <br/>
  
  select File from you pc
  <input type="file" name="photo"/>
  <br/>
  
  send btn.
  <input type="submit" value="sendPhoto" />

</form>

and you shoud now 3 way to send photo via telegram bot api :

  1. via real URL (ex: http://example.net/image.jpg)
  2. via ID of file in telegram server (u can get in when you send/get photo massage under file_id)
  3. send real file like upper ex.

if you want to send photo direct from script , i do not know how it work becuse i try to convert image in to Base64 / readAsText / blob ...etc every time i got error T_T

Upvotes: 1

Related Questions