Пример облачной прямой загрузки документации не ясен

Question

In Облачная документация Django SDK для прямой загрузки из браузера. Ниже приведен пример для direct_upload_complete просмотра.

@csrf_exempt
def direct_upload_complete(request):
  form = PhotoDirectForm(request.POST)
  if form.is_valid():
    form.save()
    ret = dict(photo_id = form.instance.id)
  else:
    ret = dict(errors = form.errors)

  return HttpResponse(json.dumps(ret), content_type='application/json')

Сразу после этого примера написано После сохранения идентификатора изображения вы теперь можете отображать непосредственно загруженное изображение точно так же, как и любое другое размещенное в Cloudinary изображение: и приводит пример кода шаблона следующим образом:

{% load cloudinary %}      
{% cloudinary photo.image format="jpg" width=120 height=80 crop="fill" %}

Меня смущает этот пример кода шаблона, поскольку он совсем не относится к коду представления Django с именем ответа ret. Скриншот документации ниже.

Что мне нужно сделать, чтобы использовать Javascript для создания переменной из объекта JSON с именем ret и отображения ее на странице шаблона?

Ниже приведен Javascript, который я использую на примере шаблона upload_prompt.html. Он работает нормально, возвращая большой палец загруженного изображения и некоторые облачные данные, которые отображаются после загрузки изображения (при событии cloudinarydone).

Но я также хочу получить идентификатор модели загруженной фотографии, чтобы создать ссылку на фотографию с помощью идентификатора.

Где ниже в Javascript можно получить значение ключа photo_id из объекта JSON с именем ret?

<script>
    $(function () {
        $('#direct_upload input[type="file"]')
        .cloudinary_fileupload({
            dropZone: '#direct_upload',
            start: function (e) {
                $('.status').text('Starting upload...');
            },
            progress: function (e, data) {
            // $('.status').text('Uploading...');
                $(".status").text("Uploading... " + Math.round((data.loaded * 100.0) / data.total) + "%");            
            },
            fail: function (e, data) {
            $(".status").text("Upload failed");
            }
        })
        .on('cloudinarydone', function (e, data) {
            $('.status').text('Updating backend...');
            $.post(this.form.action, $(this.form).serialize()).always(function (result, status, jqxhr) {
                $('.status').text(result.errors ? JSON.stringify(result.errors) : status);
            });
            var info = $('<div class="uploaded_info"/>');
            $(info).append($('<div class="image"/>').append(
                $.cloudinary.image(data.result.public_id, {
                    format: data.result.format, 
                    width: 150, 
                    height: 150, 
                    crop: "fill"
                })
            );               
            $(info).append($('<div/>').append('image/upload/' + data.result.path));
            $('.uploaded_info_holder').append(info);

        });
    });

</script>

Answer 1

Благодаря Брайану Луку из Cloudinary Support, получение значения photo_id выполняется в обратном вызове javascript POST шаблона.

Возможно, есть лучшие способы сделать это, но я просто создал переменную photoid, а затем использовал эту переменную для создания URL модели фотографий.

$.post(this.form.action, $(this.form)
    .serialize()).always(function (result, status, jqxhr) { 
    $('.status').text(result.errors ? JSON.stringify(result.errors) : status);
var photoid = JSON.stringify(result.photo_id);

$(info).append($('<div/>').append('<a href="/photo/' + photoid + '/">link</a>'));