Photo uploading

App examples

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.

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.

Filler	Must 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

Possible errors

Error code	Cause
PHOTO_SIZE_LIMIT_EXCEEDED	The size of binary content of the image in bytes exceeds the limit
PHOTO_SIZE_TOO_SMALL	Image size in pixels is too small
PHOTO_SIZE_TOO_BIG	Image size in pixels is too big
PHOTO_INVALID_FORMAT	Image format cannot be recognized
PHOTO_IMAGE_CORRUPTED	Image format is recognized, but the content is corrupted
PHOTO_NO_IMAGE	No image found in the request

A full list of possible errors with codes can be viewed 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, it’s time to 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 is 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');
        }
 
        ...
    });
}