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)
      
    }

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)
      
    }

Hampterultimate•5/27/23, 12:57 PM

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

HHampterultimate Hey! I don't think you need Cloudinary if you are storing raw images in supabase...

RevaycolizerOP•5/27/23, 2:53 PM

does it work on free plan??

RRevaycolizer does it work on free plan??

Hampterultimate•5/27/23, 2:58 PM

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

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

RevaycolizerOP•5/27/23, 2:59 PM

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

RRevaycolizer i was wondering if i could get some free solution as cloudinary takes supabase u...

Hampterultimate•5/27/23, 3:02 PM

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

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

RevaycolizerOP•5/27/23, 3:03 PM

let me show you how it displays

RevaycolizerOP•5/27/23, 3:06 PM

this one

Hampterultimate•5/27/23, 3:07 PM

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)

Hampterultimate•5/27/23, 3:07 PM

Just change the URL with your supabase public url

RRevaycolizer this one

Hampterultimate•5/27/23, 3:10 PM

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?

HHampterultimate Well, can you confirm if your created supabase public url works? and can you che...

RevaycolizerOP•5/27/23, 3:11 PM

it renders the images but with different heights

HHampterultimate Can you try this out? ```js CloudinaryImage( "http://upload.wikimedia.org/wik...

Hampterultimate•5/27/23, 3:13 PM

Did you try this out?

Hampterultimate•5/27/23, 3:13 PM

@Revaycolizer

RevaycolizerOP•5/27/23, 3:13 PM

here in console

HHampterultimate Did you try this out?

RevaycolizerOP•5/27/23, 3:13 PM

let me try it but where specifically

HHampterultimate Did you try this out?

RevaycolizerOP•5/27/23, 3:16 PM

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)

RevaycolizerOP•5/27/23, 3:18 PM

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

Hampterultimate•5/27/23, 3:18 PM

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

Cloudinary BlogNadav Soferman

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.

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

Hampterultimate•5/27/23, 3:19 PM

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

Hampterultimate•5/27/23, 3:19 PM

And that too is for NodeJS. So if you are trying to do that in ReactJS it will not work I think

HHampterultimate yes, it looks like you cannot use it on react. It could be for NodeJS. I did som...

RevaycolizerOP•5/27/23, 3:20 PM

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

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

Hampterultimate•5/27/23, 3:20 PM

Tell me this

RRevaycolizer Hi guys using cloudinary but seems transformation is not working``` const fetch...

Hampterultimate•5/27/23, 3:20 PM

This piece of code is in reactjs right?

HHampterultimate This piece of code is in reactjs right?

RevaycolizerOP•5/27/23, 3:20 PM

yes exactly in reactjs specifically nextjs framework

RRevaycolizer yes exactly in reactjs specifically nextjs framework

Hampterultimate•5/27/23, 3:21 PM

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

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

RevaycolizerOP•5/27/23, 3:22 PM

just in app directory and not apis directory

RRevaycolizer just in app directory and not apis directory

Hampterultimate•5/27/23, 3:24 PM

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.

Hampterultimate•5/27/23, 3:25 PM

That should work, you might need to change some settings in cloudinary to work with different domains sending image according to your needs

HHampterultimate If nothing works after going through the URL I sent and trying it out. What you ...

RevaycolizerOP•5/27/23, 3:25 PM

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

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

Hampterultimate•5/27/23, 3:27 PM

Well, do that if nothing else works.

HHampterultimate Well, do that if nothing else works.

RevaycolizerOP•5/27/23, 3:27 PM

fine then I will come back for feedback

RRevaycolizer fine then I will come back for feedback

Hampterultimate•5/27/23, 3:29 PM

Sure, goodluck!

HHampterultimate Sure, goodluck!

RevaycolizerOP•5/27/23, 3:30 PM

thanks just few minutes I will be done

Hampterultimate•5/27/23, 3:30 PM

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

HHampterultimate Also I don't know for sure, there could be better solutions and mine might not e...

RevaycolizerOP•5/27/23, 3:31 PM

worry out at most you did your best

HHampterultimate If nothing works after going through the URL I sent and trying it out. What you ...

RevaycolizerOP•5/27/23, 3:47 PM

used nodejs sdk but getting this error Module not found: Can't resolve 'fs'

RRevaycolizer used nodejs sdk but getting this error Module not found: Can't resolve 'fs'

Hampterultimate•5/27/23, 4:28 PM

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

HHampterultimate hmmm, I feel like you might not be creating your apis properly. Have you made AP...

RevaycolizerOP•5/27/23, 4:29 PM

nope

RRevaycolizer nope

Hampterultimate•5/27/23, 4:30 PM

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•5/27/23, 4:31 PM

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•5/27/23, 4:31 PM

This should help, you can skip step 2 I believe but give it a read in case I missed something.

Hampterultimate•5/27/23, 4:33 PM

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

HHampterultimate You should learn more about APIs in nextjs. You will be needing them to create s...

RevaycolizerOP•5/27/23, 4:36 PM

i will

Using Cloudinary

Similar Threads

Similar Threads

Similar Threads