Cloudinary direct upload documentation example is not clear

Question

In Cloudinary Django SDK documentation for direct from browser uploading it gives example below for direct_upload_complete view.

@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')

Immediately after this example it says Having stored the image ID, you can now display a directly uploaded image in the same way you would display any other Cloudinary hosted image: and gives template code example as follows:

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

I am confused by this template code example because it does not relate at all to the Django view code which has response name ret. Screenshot of documentation is below.

What would I need to do to use Javascript to create a variable from the JSON object named ret and display it on the template page?

Below is Javascript I am using on the example's upload_prompt.html template. It works fine, returning a thumb of uploaded image and some Cloudinary data that show after image is uploaded (on cloudinarydone event).

But I also want to get the uploaded photo's Model id to create a link to the photo using the id.

Where in below Javascript can I get the photo_id key value from the JSON object named 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>

Why did you think those two things are related? direct_upload_complete is for uploading and saving the image. ret is the status of that save operation. That has nothing to do with displaying the image, which you do separately by referring to the model instance you saved it to. — Daniel Roseman
First, they are related prosaically in the documentation. Second, direct_upload_complete not only uploads and saves, it sends response. That response contains uploaded photo's model id. I want to access that model id so I can use it refer to it in template. Are you able to describe how to do that in template? — curtisp

curtisp curtisp · Accepted Answer · 2019-06-18T21:30:00

Thanks to Brian Luk at Cloudinary Support, getting photo_id value is done in template's javascript POST request callback.

Maybe there are betters ways to do this, but I simply created variable photoid and then used that variable to create Photo model 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>'));

Cloudinary direct upload documentation example is not clear

1 Answers