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•2y 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

RevaycolizerOP•2y ago

does it work on free plan??

Hampterultimate•2y ago

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

RevaycolizerOP•2y ago

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

Hampterultimate•2y ago

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

RevaycolizerOP•2y ago

let me show you how it displays

RevaycolizerOP•2y ago

this one

Hampterultimate•2y 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?

RevaycolizerOP•2y ago

it renders the images but with different heights

Hampterultimate•2y ago

Did you try this out? @Revaycolizer

RevaycolizerOP•2y ago

here in console

RevaycolizerOP•2y 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•2y 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•2y 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

RevaycolizerOP•2y ago

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

Hampterultimate•2y ago

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

RevaycolizerOP•2y ago

yes exactly in reactjs specifically nextjs framework

Hampterultimate•2y ago

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

RevaycolizerOP•2y ago

just in app directory and not apis directory

Hampterultimate•2y 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

RevaycolizerOP•2y ago

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

Hampterultimate•2y ago

Well, do that if nothing else works.

RevaycolizerOP•2y ago

fine then I will come back for feedback

Hampterultimate•2y ago

Sure, goodluck!

RevaycolizerOP•2y ago

thanks just few minutes I will be done

Hampterultimate•2y 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 😱

RevaycolizerOP•2y ago

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

Hampterultimate•2y ago

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

RevaycolizerOP•2y ago

nope

Hampterultimate•2y 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•2y 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•2y 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

RevaycolizerOP•2y ago

i will

Gaming

Programming

Using Cloudinary