How to get folder list from API to Frontend?

rwahdan

Hi

OK I have a question. Here is what I have in my API:

public PhotoService(IConfiguration config)

    {

      Account account = new Account

      (

        config.GetSection("CloudinarySettings:CloudName").Value,

        config.GetSection("CloudinarySettings:ApiKey").Value,

        config.GetSection("CloudinarySettings:ApiSecret").Value

      );

      cloudinary = new Cloudinary(account);

    }

now how I can list the folders? where do I add:

cloudinary.RootFolders(); (in API)

or directly fetch the url:

fetch("https://api.cloudinary.com/v1_1/cloudName/folders"); (in fronend)

I tried to fetch in frontend but it says unthorized since the config is in the webAPI and not the frontend.

rwahdan

I read through it is not allowed to be done in frontend

rwahdan

I tried this it is not working:

fetch('https://api.cloudinary.com/v1_1/cloudName/folders', {

      method: 'get',

      headers: {

        'Authorization': 'Basic ' + "api" + ":" + "secret",

      },

    }).then(res => res.json())

it is not working from frontend. How to do that in backend?

Zachary

Hey there,

Looks like you aren't encoding the authorization header. You could add something along the lines of the following code to get the right header.

const base64EncodedAuthString = Buffer.from(`${cloudinaryApiKey}:${cloudinaryApiSecret}`).toString('base64');
const authorizationHeader = { 'Authorization': `Basic ${base64EncodedAuthString}` };

Via the backend you would use the same endpoint but I would recommend using one of our SDKs. You can choose the language of your choice in our documentation.

https://cloudinary.com/documentation/cloudinary_sdks

rwahdan

can you guide me how to do the code below with angular?

const base64EncodedAuthString = Buffer.from(`${cloudinaryApiKey}:${cloudinaryApiSecret}`).toString('base64');
const authorizationHeader = { 'Authorization': `Basic ${base64EncodedAuthString}` };

Zachary

To encode and decode Base64 in an Angular application, you can use the built-in btoa() and atob() functions in JavaScript. 

const base64EncodedAuthString = btoa(`${cloudinaryApiKey}:${cloudinaryApiSecret}`);

rwahdan

one more question and sorry for that as I am new to this.

const base64EncodedAuthString = btoa(`${cloudinaryApiKey}:${cloudinaryApiSecret}`);

these variables where are they saved? I did that but there is red line for the variables?

Zachary

These are just placeholders, you can define them earlier in your code. I would recommend not hardcoding your API secret in public-facing code as it can pose a security risk.

Since you will not need to encode this combo more than once you can also just use the encoded authorization instead of encoding it every time.

rwahdan

Ok here is what i did but still have error:

ApiKey = environment.ApiKey;

  ApiSecret = environment.ApiSecret;

const base64EncodedAuthString = btoa(`${this.ApiKey}:${this.ApiSecret}`);

    fetch('https://api.cloudinary.com/v1_1/cloudname/folders', {

      method: 'get',

      headers: {

        'Authorization': `Basic ${base64EncodedAuthString}`,

      },

    }).then(res => res.json())

i get this error:

ERROR Error: Uncaught (in promise): TypeError: Failed to fetch

TypeError: Failed to fetch

Vdeub

Hi @rwahdan,

This is expected, you can't use any APIs in the frontend since it uses credentials that shouldn't be made available on the frontend.

You should:

• Send a request from the frontend to your backend
• In your backend, handle the frontend request and request the data from Cloudinary.
• Send the data back to your frontend when you receive the answer from Cloudinary.

Hope that helps.

Best,

Loic