How to send a post to the wall of the Vkontakte group with a picture using the VK API JavaScript?

Question

PHP

Good evening!
Tell me, please, how to organize the sending of a post (text) with a picture to your Vkontakte group? Yes, the principle itself is perfectly described here . The question is in a working example, which I can’t find / write in any way.
With sending text (in JS) - sort of figured it out.
index.html:

<script src="//vk.com/js/api/xd_connection.js?2" type="text/javascript"></script>
<script src="//vk.com/js/api/openapi.js" type="text/javascript"></script>

<button id="send_tour_button">Отправить в группу Вконтакте</button>

  <script>
    // VK Init.
    VK.init({
      apiId: ID_APP
    });
    // Сама функция.
    function WallPost(send_data) {
      VK.api('wall.post', {owner_id: '-GROUP_ID', message: send_data}, function(data) {
        if (data.response) alert('Успешно опубликовано в группе!');
      });
    }
    // Send.
    document.getElementById('send_tour_button').onclick = function() {
      WallPost('Тестовое сообщение!');
    }
  </script>

How to add here also the attachment of a picture (before sending) and the subsequent sending? The image is in the same folder as the index.html.
Thank you in advance!

Answer 1

Specifically, you won’t be able to upload files via JavaScript because the VK API does not support CORS.
Suppose you have a form on your site where textarea and input[type=file]. You want to make sure that when submitting the form, all this goodness is fasted on VKontakte on the wall of your group. The steps will be like this:

1. After clicking the "Submit" button, send the image to your server using AJAX.
   
2. After receiving the image on the server, according to the instructions , upload it to the album of your VK group.
   
3. After uploading the image, VK will return its ID to you. You must return this ID to the user in response to the image upload described in the first step.
   
4. Attach the image ID as an attachment to the posted post. Code example:
   

   VK.api('wall.post', {
     owner_id: '-GROUP_ID',
     message: send_data,
     attachments: 'photo' + photo_id // photo_id - это ID изображения
   }, function(data) {
     if (data.response) alert('Успешно опубликовано в группе!');
   });

   
   But if you are doing some kind of web admin for your communities, then I would think about completely moving to a standalone application, where all methods are performed on the server side.