Fetching Array of Images from Cloudinary

Follow

Hendry

• July 14, 2018 08:33

I have successfully used Multer to upload a file from my react native app to cloudinary

Now I am trying to fetch the collection of images and display in my react native app

Is it possible for me to do an axios.get call from within my react native app to get an array of urls which I can cycle through to list the images

eg

fetchImages=async () => {

constresponse=awaitaxios.get(

"https://res.cloudinary.com/hendrylim/image/fetch/"

);

console.log(response);

};

or if its not possible directly from react (hence i need to go through node then make api call from my react native), can someone point me to some excellent resources which I can research to achieve the images fetching capability? Tq

0

• 

  Raya Straus

  • July 15, 2018 11:40

  Using the Admin API to list resources on our node SDK is a good option- https://cloudinary.com/documentation/admin_api#list_resources

  Please note that this is not available client side since it means exposing your API secret. That being said, you can use list to list all images with a specific tag.

  For example, 

  http://res.cloudinary.com/<cloud_name>/image/list/<tag_name>.json

  Please take a look at this tutorial for more information and pointers- https://github.com/cloudinary-developers/build-a-mini-netflix/blob/master/React/display-videos.md

  0

  Comment actions Permalink
• 

  Arbortree Creations

  • October 11, 2019 06:50
  • Edited

  Hi Raya Straus
  
  So what your saying is if we want a JSON list of all images such as in my folder called "library", it has to be done through the server, can just get all these from the client. Currently, we do get them from the server. I was just trying to cut away the middle man (Server) ?
  
  When I try you request endpoint above using axios(http://res.cloudinary.com/<cloud_name>/image/list/<tag_name>.json), it throws unauthorized code 401 ?
  
  Daniel

  0

  Comment actions Permalink
• 

  Aleksandar Kostadinov

  • October 11, 2019 16:29

  Hi Daniel,

  Most likely the reason you're seeing a 401 error is that by default these client side based resource lists are restricted within accounts. To enable access to those, please log into your account and go to the Settings => Security tab. There you will find a list of different media types, private, upload, fetch in addition to resource lists. If the option next to a type is ticked then this type won't be allowed in the account and thus if you uncheck it, save and retry, it should work for you.

  Apart from resource lists, you'll need to use the API to list resources and this is due to it requiring authentication (API secret to generate the signature) which can't be used on the client side. A solution that may work for you so that you can use resource lists to get images in specific folders is if you also give a tag with the same folder name to assets you put in different folders. That way you can then request resource lists for your images based on the tags which will reflect the folder name.

  Best regards,

  Aleksandar

  0

  Comment actions Permalink
• 

  Arbortree Creations

  • October 18, 2019 18:45

  Hi Aleksandar Kostadinov
  
  Ok, I understand. I'll give that a shot!
  
  Curious question. We have many client process variables usually saved like so REACT_APP_MY_VARIABLE_NAME. React script auto places these in the process env on the client. Are all these variables public? Can we simply just not hide sensitive variables on the client? Thanks
  
  Daniel

  0

  Comment actions Permalink
• 

  Aleksandar Kostadinov

  • November 04, 2019 09:21

  Hi Daniel,

  When storing credentials on the client side they are never really hidden, at best, they can be more difficult to obtain. This is why we recommend keeping the API Secret strictly on the server-side, as having access to this can authorize a user to perform actions on your account via the API on your behalf. The API Key, on the other hand, is not sensitive as it won't allow any access on its own and in fact, is part of some client-side code such as when configuring the Media Library Widget.

  Best regards,

  Aleksandar

  0

  Comment actions Permalink

Post is closed for comments.