Загрузка фотографий на сервер

Код примера открыт и доступен на github

Загрузка фотографий на сервер является одной из сложно реализуемых задач при использовании API Одноклассников.

Она состоит из нескольких шагов, которые рассмотрим далее.

Шаг 1 – получение URL для загрузки фотографий.

Для этого используется метод photosV2.getUploadUrl. У метода есть несколько настроек, подробнее о которых можно прочитать в его описании.

Так как загрузка производится для определенного пользователя, то понадобится либо access_token, либо session_key, а также разрешение PHOTO_CONTENT от пользователя.

После выполнения запроса к API, получаем ответ, в котором указаны будущие id фотографий, url для загрузки и expires.

Выполнив этот метод, можно перейти к следующему.

В примере этот метод вызывается при нажатии на кнопку “Draw”. Получив url для загрузки, мы подставляем его и рисуем форму.

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

Шаг 2 – загрузка фотографий через HTTP POST

Непосредственная загрузка фотографий производится на upload_url из первого шага.

Следующий фрагмент HTML-кода можно использовать для добавления 3 изображений:

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

Заполнители

Можно запросить множество идентификаторов фотографий на первом шаге с помощью метода photosV2.getUploadUrl, но загружать содержимое более мелкими партиями. Для этого нужно запросить URL для добавления с заполнителями, затем заменить заполнитель соответствующим значением.

ЗаполнительДолжен быть заменен
${photoIds}Должен быть заменен на список идентификаторов фотографий, которые требуется добавить. Идентификаторы фотографий должны разделяться символом запятой (,).

Ответ

Ответ содержит набор идентификаторов фотографий, для каждого из которых предоставляется маркер.

Примечание

Метод всегда отправляет ответ в формате JSON. Нет возможности запросить ответ в формате XML.

Возможные ошибки

Код ошибкиПричина
PHOTO_SIZE_LIMIT_EXCEEDEDРазмер двоичного содержимого изображения в байтах превышает предел
PHOTO_SIZE_TOO_SMALLСлишком маленький размер изображения в пикселях
PHOTO_SIZE_TOO_BIGСлишком большой размер изображения в пикселях
PHOTO_INVALID_FORMATНевозможно распознать формат изображения
PHOTO_IMAGE_CORRUPTEDФормат изображения распознан, но содержимое повреждено
PHOTO_NO_IMAGEВ запросе не найдено изображение

Полный список возможных ошибок с кодами можно посмотреть на странице Обработка ошибок.

Примеры

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"
      }
   }
}

В приведенном примере при нажатии на кнопку “Отправить” ajax-запросом происходит загрузка фотографий на необходимый url.
По получению результата переходим к следующему шагу.

При использовании загрузки фотографий для добавления медиатопика шаг 3 производить не надо.
Вам понадобится параметр token, который пришел в ответ на шаг 2.

Шаг 3 – завершение добавления фотографий.

В последнюю очередь необходимо вызвать метод photosV2.commit.
Он завершает загрузку фотографий и позволяет добавить желаемую мета-информацию к ним (например, комментарий).

Для использование метода понадобятся id загруженных фотографий и маркеры token.
Более подробно можно прочитать в описании метода.

В нашем примере по окончанию отправки данных в двоичном виде вызовется функция завершения загрузки.
Для этого мы пройдем массиву из фотографий, полученному от шага 2, и вызовем для них photosV2.commit.
По получении ответа проверяем, что на статус загрузки каждой из фотографий SUCCESS и выдаем оповещение, что загрузка прошла успешно. Иначе - сообщение, что загрузка не удалась.

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');
        }
 
        ...
    });
}