How to get folder list from API to Frontend?

rwahdan
rwahdan Member Posts: 45
edited March 16 in Developer APIs

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.

Tagged:

Best Answer

  • rwahdan
    rwahdan Member Posts: 45
    Answer ✓

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

Answers

  • rwahdan
    rwahdan Member Posts: 45

    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
    Zachary Member, Cloudinary Staff Posts: 25

    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.


  • rwahdan
    rwahdan Member Posts: 45

    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
    Zachary Member, Cloudinary Staff Posts: 25

    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
    rwahdan Member Posts: 45

    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
    Zachary Member, Cloudinary Staff Posts: 25

    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
    rwahdan Member Posts: 45

    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
    Vdeub Member, Cloudinary Staff Posts: 52

    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