Skip to main content

Read All Image URLs Using JQuery

Graham Roy

There are a number of articles about getting the list of images for a specific tag, but is it possible to get a list of all the images in the media library?

I have an application that cycles through images and I want to get a list of all images in the media library. My code looks like:

 

function showSlides() {
  var i;
  var slides = //get the urls from cloudinary here
  for (i = 0; i < slides.length; i++) {
    slides[i].style.display = "none";
  }
  slideIndex++;
  if (slideIndex > slides.length) {slideIndex = 1}

    slides[slideIndex-1].style.display = "block";
    setTimeout(showSlides, 5000); // Change image every 5 seconds
}

 

but when I try and get the urls for the images I am getting an authentication error. I want to be able to get an array of the image urls to put into the code above.

 

function updatePhotoAlbum(){
  $.cloudinary.config({ cloud_name: 'cloudName', api_key: 'myKey' });
  var url = "https://api.cloudinary.com/v1_1/cloudName/resources/image";
  $.ajax({
    type:"POST",
      beforeSend: function(request){
      request.setRequestHeader("API_KEY","myKey");
      request.setRequestHeader("API_SECRET","mySecret");
    },
  url: url,
  success: function(response){
    console.log(response);
  }
});

 

This function I was going to call and update the previous code snippet's array of images with the returned urls but I just keep getting

Failed to load resource: the server responded with a status of 404 (Not Found)

 

but if I run the url in the browser I get the authorisation request which, when I fill in the correct details, returns me a list of the images 

 

0

Comments

3 comments

Date Votes
  • Roee Ben Ari

    Hi Graham, thanks for reaching out. 

    Regarding the error you see, did you make sure to replace the "cloudName" part of the request URL with your own cloud name (you can see it in https://cloudinary.com/console).

    For example, if your cloud name is "graham" then the URL should be:

    https://api.cloudinary.com/v1_1/graham/resources/image

    in addition, the request should be done using "GET" rather than "POST".

    Finally, the API uses basic auth so you should pass your credentials with something like this:

    beforeSend: function (xhr) {
    xhr.setRequestHeader ("Authorization", "Basic " + btoa(apiKey + ":" + secret));
    },

    The more important issue though is that you shouldn't perform such a request on the client side as it will expose your cloud's secret which is definitely something you should keep safe.
    As the API to retrieve resources data is part of the Cloudinary Admin API it would allow anyone who obtains your API key and secret to perform all actions on your account. This kind of operation should be done on your own server rather than on the client in order to protect your account.

    0
  • Graham Roy

    Hi Roee.

     

    Thanks for your reply. I did include the cloudname in the url and I have made the changes you suggested but it still doesn't work.

    Here is my function:

    function updatePhotoAlbum(){
      var url = "https://api.cloudinary.com/v1_1/cloudName/resources/image";
      $.ajax({
          type:"GET",
          beforeSend: function(request){
          var API_KEY = "apikey";
          var API_SECRET = "apisecret";
          request.setRequestHeader("Authorization","Basic" + btoa(API_KEY + ":" + API_SECRET));
        },
          url: url,
          success: function(response){
          console.log(response);
        }
      });
    }

    but I still get an error:

    Failed to load resource: the server responded with a status of 404 (Not Found)

     

    in the console. When I click the link it refers to go I go the resources json

    {"resources":[{"public_id":"arvponfkoibwhkz3jfao","format":"jpg","version":1508874121,"resource_type":"image","type":"upload","created_at":"2017-10-24T19:42:02Z","bytes":390795,"width":1280,"height":960,"url":"http://res.cloudinary.com/cloudName/image/upload/v1508874121/arvponfkoibwhkz3jfao.jpg","secure_url":"https://res.cloudinary.com/cloudName/image/upload/v1508874121/arvponfkoibwhkz3jfao.jpg"},{"public_id":"ydglvezbrsbxy8wtixy1","format":"jpg","version":1508873757,"resource_type":"image","type":"upload","created_at":"2017-10-24T19:35:57Z","bytes":1061637,"width":2592,"height":1936,"url":"http://res.cloudinary.com/cloudName/image/upload/v1508873757/ydglvezbrsbxy8wtixy1.jpg","secure_url":"https://res.cloudinary.com/cloudName/image/upload/v1508873757/ydglvezbrsbxy8wtixy1.jpg"},{"public_id":"sample","format":"jpg","version":1508534685,"resource_type":"image","type":"upload","created_at":"2017-10-20T21:24:45Z","bytes":109669,"width":864,"height":576,"url":"http://res.cloudinary.com/cloudName/image/upload/v1508534685/sample.jpg","secure_url":"https://res.cloudinary.com/dyjubu34g/image/upload/v1508534685/sample.jpg"},

     

    0
  • Roee Ben Ari

    Hi Graham,

    It looks like the request is blocked because our server doesn't allow cross-domain requests on the API for security reasons. 
    This ties to the second part of the answer given above. You shouldn't be doing this kind of request in the browser - as it also seems to be not only non-recommended but impossible.

    0

Post is closed for comments.

Didn't find what you were looking for?

New post