How to set a specific json response object as a js var - Cloudinary

Question

I am using Cloudinary to host my profile images that are set by users.

I'm mostly using PHP for my web application -> Here are the instructions as provided by Cloudinary http://cloudinary.com/documentation/php_image_upload#overview

The problem that I encounter is that I want to display the image directly after upload by parsing the newly created URL for the image that is returned by JSON.

When I do the console.log as provided by Cloudinary:

    $(document).ready(function() {
        $('.cloudinary-fileupload').bind('cloudinarydone', function(e, data) {
           console.log(data);
           return true;
        });
    });

This is the console.log response that I receive

Can anyone please help me with a javascript or JQuery function that I can use in order to display the updated image with in my image tag.

Answer 1

You need read the tree...

jqXHR.responseJSON.url

In this case, use

data.result.url

See example of http://cloudinary.com/documentation/php_image_upload#preview_thumbnail_progress_indication_multiple_images

Answer 2

Can you update the src of your image tag based on the json returned?

Something like this in the callback function:

var imgDiv = document.getElementById("profile");
imgDiv.src = data.jqXHR.responseJSON.url;