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.

score 1 · Accepted Answer · answered Aug 18 '17 at 08:14

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

answered Aug 18 '17 at 08:14

John Henrique

324
2
12

@ JohnHenrique, thanks for your response. The thing is I want to update the existing profile picture with the newly uploaded one. Your link refers to showing a preview which is not exactly what I had in mind. – francoiscx Aug 18 '17 at 08:45
You need see example of code "how to get url returned", more attention please. The return process is EVERY the same. – John Henrique Aug 18 '17 at 08:53
you must think I'm stupid or something. But thanks so much, I realised what you meant with your answer and was able to get the variable I required using the Console.log. now I just need to implement the replacement of the value. – francoiscx Aug 18 '17 at 09:02
You is using jQuery, right? To replace value of SRC image just use prop function. See documentation is very simple. – John Henrique Aug 18 '17 at 09:12

score 0 · Answer 2 · answered Aug 18 '17 at 08:16

0

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;

answered Aug 18 '17 at 08:16

J S

1,068
6
7

@J S. I am relatively new to programming and would appreciate it if you could look at the returned code as provided in the image "This is the console.log response that I receive"[link]( https://i.stack.imgur.com/Ua8kw.png) to help me formulate some actual script specific to my situation. – francoiscx Aug 18 '17 at 08:42

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

2 Answers2