Using Cloudinary

Hi guys using cloudinary but seems transformation is not working

const fetchPosts=useCallback(async()=>{
    const { data:files } = await supabase
    .from('category')
            .select()

    if(files && files.length>0){
      const promises = files.map(async(file)=>{
        const { data: { publicUrl } } = supabase.storage
          .from('files')
          .getPublicUrl(file.vname);
        const myImage = new CloudinaryImage(publicUrl, {cloudName: 'cloudname'})
          .resize(fill().width(100).height(200));
         
        return {id:file.id, myImage:myImage};
      });
      const posts = await Promise.all(promises);
      setDownload(posts);
      console.log(posts)
      
    }

const fetchPosts=useCallback(async()=>{
    const { data:files } = await supabase
    .from('category')
            .select()

    if(files && files.length>0){
      const promises = files.map(async(file)=>{
        const { data: { publicUrl } } = supabase.storage
          .from('files')
          .getPublicUrl(file.vname);
        const myImage = new CloudinaryImage(publicUrl, {cloudName: 'cloudname'})
          .resize(fill().width(100).height(200));
         
        return {id:file.id, myImage:myImage};
      });
      const posts = await Promise.all(promises);
      setDownload(posts);
      console.log(posts)
      
    }

33 Replies

Hampterultimate•13mo ago

Hey! I don't think you need Cloudinary if you are storing raw images in supabase. Check this page for details https://supabase.com/docs/guides/storage/image-transformations Here is an example from that link

supabase.storage.from('bucket').getPublicUrl('image.jpg', {
  transform: {
    width: 500,
    height: 600,
  },
})

supabase.storage.from('bucket').getPublicUrl('image.jpg', {
  transform: {
    width: 500,
    height: 600,
  },
})

Storage Image Transformations | Supabase Docs

Transform images with Storage

Revaycolizer•13mo ago

does it work on free plan??

Hampterultimate•13mo ago

Oh my bad, no looks like it is not a free solution sadly.

Revaycolizer•13mo ago

i was wondering if i could get some free solution as cloudinary takes supabase url but does not perform transformation

Hampterultimate•13mo ago

Looking more into your code, what output are you getting?

Revaycolizer•13mo ago

let me show you how it displays

Revaycolizer•13mo ago

this one

Hampterultimate•13mo ago

Can you try this out?

CloudinaryImage(
  "http://upload.wikimedia.org/wikipedia/commons/4/44/Tulip_-_floriade_canberra.jpg").
  image(type = 'fetch', sign_url = True)

CloudinaryImage(
  "http://upload.wikimedia.org/wikipedia/commons/4/44/Tulip_-_floriade_canberra.jpg").
  image(type = 'fetch', sign_url = True)

Just change the URL with your supabase public url Well, can you confirm if your created supabase public url works? and can you check if your posts object is pushing out some value or undefined?

Revaycolizer•13mo ago

it renders the images but with different heights

Hampterultimate•13mo ago

Did you try this out? @Revaycolizer

Revaycolizer•13mo ago

here in console

Revaycolizer•13mo ago

let me try it but where specifically fixed it but some errors

const myImage = new CloudinaryImage(
            publicUrl).
            image(type = 'fetch', sign_url = True)

const myImage = new CloudinaryImage(
            publicUrl).
            image(type = 'fetch', sign_url = True)

Property 'image' does not exist on type 'CloudinaryImage'.

Hampterultimate•13mo ago

https://cloudinary.com/blog/on_the_fly_image_manipulations_secured_with_signed_urls#strict_fetch_urls Maybe this could help.

Nadav Soferman

Cloudinary Blog

Secure Image Transformations With Signed URLs

Learn how to securely sign Cloudinary image-URLs with a simple parameter to prevent arbitrary access or modification of images.

Hampterultimate•13mo ago

yes, it looks like you cannot use it on react. It could be for NodeJS. I did some research but wasnt able to find anything useful except that link And that too is for NodeJS. So if you are trying to do that in ReactJS it will not work I think

Revaycolizer•13mo ago

thanks let me see what can be done then i will contact you

Hampterultimate•13mo ago

Tell me this This piece of code is in reactjs right?

Revaycolizer•13mo ago

yes exactly in reactjs specifically nextjs framework

Hampterultimate•13mo ago

oh I see, so you are writing your APIs in the apis directory in Node right?

Revaycolizer•13mo ago

just in app directory and not apis directory

Hampterultimate•13mo ago

If nothing works after going through the URL I sent and trying it out. What you can do is create an API which gets the link in request, use the nodejs specific cloudinary function as shown in the URL, transform the image and send the public url created by cloudinary as a response. That should work, you might need to change some settings in cloudinary to work with different domains sending image according to your needs

Revaycolizer•13mo ago

seems a lot of things should be done then let me give it a try

Hampterultimate•13mo ago

Well, do that if nothing else works.

Revaycolizer•13mo ago

fine then I will come back for feedback

Hampterultimate•13mo ago

Sure, goodluck!

Revaycolizer•13mo ago

thanks just few minutes I will be done

Hampterultimate•13mo ago

Also I don't know for sure, there could be better solutions and mine might not even work. So please don't get mad if it doesnt 😱

Revaycolizer•13mo ago

worry out at most you did your best used nodejs sdk but getting this error Module not found: Can't resolve 'fs'

Hampterultimate•13mo ago

hmmm, I feel like you might not be creating your apis properly. Have you made APIs before in your project?

Revaycolizer•13mo ago

nope

Hampterultimate•13mo ago

Okay so try creating one simple api then calling it on thunderclient or postman just to see if its working in your next project. I have not worked with node that much so I cant be of much help there

Hampterultimate•13mo ago

https://nextjs.org/learn/basics/api-routes

Learn | Next.js

Production grade React applications that scale. The world’s leading companies use Next.js by Vercel to build pre-rendered applications, static websites, and more.

Hampterultimate•13mo ago

This should help, you can skip step 2 I believe but give it a read in case I missed something. You should learn more about APIs in nextjs. You will be needing them to create safe and scalable applications. There will be times you need to perform some action which requies some key so its best to use APIs for that as if you do that same logic on the front end it could expose your API keys and malicious actors can use it just by accessing your frontend

Revaycolizer•13mo ago

i will

Gaming

Programming

Using Cloudinary