Photo uploading

An example code is open and available on github

Uploading photos to the server is one of the tasks that are most difficult to implement when using Odnoklassniki’s API.

It consists of several steps, which we are now going to review.

Step 1 – getting a URL for uploading photos.

For this, the photosV2.getUploadUrl method is used. The method has several settings; you can learn more information about them in its description.

As the uploading is done for a specific user, we need either access_token or session_key, as well as the permission PHOTO_CONTENT from the user.

After requesting API we get the answer with future photo IDs, url for uploading and expires are indicated.

Having executed this method, we proceed to the next one.

In the example, this method is called by clicking on the “Draw” button. Once we have an url for uploading, we put it and draw a form.

function loadForm(quantity) {
    FAPI.Client.call({"method":"photosV2.getUploadUrl", "count" : quantity}, function(method, result, data) {
        drawForm(result["upload_url"], quantity);
    });
}

Step 2 – uploading photos via HTTP POST

Photo uploading itself is done to upload_url from the first step.

The next part of the HTML code can be used to add 3 images:

<form method="POST" enctype="multipart/form-data" action="<upload URL>">
  <input type="file" name="pic1" accept="image/*" />
  <input type="file" name="pic2" accept="image/*" />
  <input type="file" name="pic3" accept="image/*" />
  <input type="submit" />
</form>

Fillers

During the first step, you can request many photo ids with the photosV2.getUploadUrl method, but upload the content in smaller batches. For this, you should request a URL for adding with fillers, and then replace a filler with a corresponding value.

FillerMust be replaced
${photoIds}Must be replaced with a list of photo IDs that should be added. Photo IDs must be separated with commas (,).

Response

The response contains a set of photo IDs, with a marker provided for each one.

Note

The method always replies in the JSON format. There is no possibility to request a response in the XML format.

Possible errors

Error codeCause
PHOTO_SIZE_LIMIT_EXCEEDEDThe size of binary content of the image in bytes exceeds the limit
PHOTO_SIZE_TOO_SMALLImage size in pixels is too small
PHOTO_SIZE_TOO_BIGImage size in pixels is too big
PHOTO_INVALID_FORMATImage format cannot be recognized
PHOTO_IMAGE_CORRUPTEDImage format is recognized, but the content is corrupted
PHOTO_NO_IMAGENo image found in the request

A full list of possible errors with codes at Processing errors.

Examples

URL : <upload URL>
Post:
Content-Type: multipart/form-data; boundary=---------------------------11020459624021
Content-Length: 831083
\\
-----------------------------11020459624021
Content-Disposition: form-data; name="pic1"; filename="IMG_0699.JPG"
Content-Type: image/jpeg
....................
-----------------------------11020459624021
Content-Disposition: form-data; name="pic2"; filename="IMG_0700.JPG"
Content-Type: image/jpeg
....................
-----------------------------11020459624021
Content-Disposition: form-data; name="pic3"; filename="IMG_0701.JPG"
Content-Type: image/jpeg
....................
-----------------------------11020459624021--
{
   "photos":{
      "qxJnTUZEifEHlaZ2Nz81g3EaHKQnxlbd7Qu8TWddumIXGV5DTMbiQQ==":{
         "token":"6P+dZaVxD9ApR6YstI/4SzLPS2T7m2Z5ViZSaqVl6X8LMBKFE4Tmjmm8U6zCcN1ZrBiQHfPmtzKrn6xnNhGnA5LoVecHl5PWf+f7ucCbl41Jii8ZzsVdIoOe79D/lsv7"
      },
      "Tt7Aoxg7aAyyAgbgCsFpjhjBkgmJvbBS5wdNd8/qGY6rphKGXXYwRg==":{
         "token":"9x9LSso95pGTv3Zwyhy6cbCpOz5wUrSFjYLGRLy6i7AnS1l2cOrWtvPOJKL9ps7V8KAaMpvgMXsMaVdCTB5BTsKZ4gMv1bOk7MGDbeS+3NQqwPIR4VIldkHydaI0KYQg"
      },
      "RGZb34XWM+gbO739cLshQIh2DOdQAuJ6ss8MUaS3N9QVz/6eMNGaLg==":{
         "token":"IBi/GFg7L4tTdNcACoLghzZzyS/YDdLHreESHOep5i2vL82nHavL3Ku4z/NerqvQOPyQh2kVfbFzVk2K2KJd5FqLsXR5VLzIYwQ5KMO/zk3faAP2fJpUhwfy6LHFxblH"
      }
   }
}

In this example, when an ajax request activates the “Send” button, photos are uploaded to a corresponding url.

With the result received, proceed to the next step.

When uploading photos to add a media topic, step 3 should be skipped.
You will need the token parameter, which you received in the response in step 2.

Step 3 – completing photo upload

Lastly, it is necessary to call the photosV2.commit method. It completes the photo upload and allows adding desirable meta information to photos (e.g. comments).

To use this method, you will need IDs of photos uploaded and token markers. You can find more information on this in the description of the method.

In this example, once data in the binary form are sent, an upload completion function is called.

To do this, we call photosV2.commit for the photos we got from step 2.

Having received the response, we check that the status of each photo upload is SUCCESS and show a notification about the successful upload. Otherwise, a message saying that uploading has failed.

function commitUpload(json) {
    ...
 
    FAPI.Client.call({"method":"photosV2.commit", "photos":requestJSON}, function(method, data, result) {
        var success = true;
 
        $.each(data["photos"], function(index, photoResult) {
            if (photoResult["status"] != "SUCCESS") {
                success = false;
            }
        });
 
        if (success) {
            alert('Success upload');
        } else {
            alert('Upload failed');
        }
 
        ...
    });
}