E
E
evilandfox2016-03-05 15:37:12
JavaScript
evilandfox, 2016-03-05 15:37:12

How to upload a photo to the VK server directly from a browser with a running iFrame application?

Sketched the code on ES2015 using VK api and browser fetch api for simplicity. The code tries to upload a test photo to the user's wall.
Of course, when I ran it, the console showed an error that the server did not return the Access-Control-Origin header in the response and all that (my hostname has been changed):

Fetch API cannot load http://cs622616.vk.com/upload.php?act=do_add&mid=12345&aid=-14&gid=0&ha…70853&rhash=bf7ffe3ac92c408a14accbc12cc74bc0&swfupload=1&api=1&wallphoto=1. No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://test.ru' is therefore not allowed access. If an opaque response serves your needs, set the request's mode to 'no-cors' to fetch the resource with CORS disabled.

If you add the fetch property to the request settings, then an empty response comes. Any thoughts? Here is the code{mode: 'no-cors'}
VK.api('photos.getWallUploadServer', {}, uploadServer => {
    fetch('testimage.jpg')
      .then(response => response.blob())
      .then((img) => {
        var formData = new FormData();
        formData.append('photo', img);
        fetch(uploadServer.response.upload_url, {
          method: 'POST',
          headers: new Headers({
            'Content-Type': 'multipart/form-data'
          }),
          body: formData
        })
        .then(response => response.json())
        .then(metaJson => {
          VK.api('photos.saveWallPhoto', metaJson, saveWall => {
            const photo = `photo${saveWall.owner_id}_${saveWall.id}`;
            VK.api('wall.post', {attachments: photo}, wallPost => {
              if (!wallPost.error)
                console.log('Успех!');
              else
                console.log('Ошибка:', wallPost.error);
            });
          });
        })
        .catch(err => { console.log('Ошибка:', err); })
      });
  });

And yes, what is it for? There is a VK application that posts the result image on the user's wall. The image is easily generated in blob png using one js library for translating html into svg and then into png. Well, then it would be just great to upload this picture directly from the browser to the VK server, without wasting traffic and server resources, etc.

Answer the question

In order to leave comments, you need to log in

2 answer(s)
A
Alexander, 2016-03-05
@Rekk1

vk.com/dev/upload_files

P
Pianist, 2016-06-09
@kzakhariy

In Angular, I make a request like this, cross-domain:

var token = '<ACCESS_TOKEN>';
var getVideos = function(){
                var params = {
                    extended: 1,
                    v: 5.45,
                    access_token: token,
                    videos: ['12312332_3232323,33242424244_5141424']
                    callback: "JSON_CALLBACK",
                };
                return $http.jsonp('https://api.vk.com/method/video.get', {
                    params: params
                });
}

//Run
getVideos().then(function(videoResponse){
   //Here video response
   console.log(videoResponse):
});

Didn't find what you were looking for?

Ask your question

Ask a Question

731 491 924 answers to any question