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
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,
},
})
Revaycolizer
Revaycolizer•2y ago
does it work on free plan??
Hampterultimate
Hampterultimate•2y ago
Oh my bad, no looks like it is not a free solution sadly.
Revaycolizer
Revaycolizer•2y ago
i was wondering if i could get some free solution as cloudinary takes supabase url but does not perform transformation
Hampterultimate
Hampterultimate•2y ago
Looking more into your code, what output are you getting?
Revaycolizer
Revaycolizer•2y ago
let me show you how it displays
Revaycolizer
Revaycolizer•2y ago
this one
Hampterultimate
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?
Revaycolizer
Revaycolizer•2y ago
it renders the images but with different heights
Hampterultimate
Hampterultimate•2y ago
Did you try this out? @Revaycolizer
Revaycolizer
Revaycolizer•2y ago
here in console
Revaycolizer
Revaycolizer•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
Hampterultimate•2y ago
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
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
Revaycolizer
Revaycolizer•2y ago
thanks let me see what can be done then i will contact you
Hampterultimate
Hampterultimate•2y ago
Tell me this This piece of code is in reactjs right?
Revaycolizer
Revaycolizer•2y ago
yes exactly in reactjs specifically nextjs framework
Hampterultimate
Hampterultimate•2y ago
oh I see, so you are writing your APIs in the apis directory in Node right?
Revaycolizer
Revaycolizer•2y ago
just in app directory and not apis directory
Hampterultimate
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
Revaycolizer
Revaycolizer•2y ago
seems a lot of things should be done then let me give it a try
Hampterultimate
Hampterultimate•2y ago
Well, do that if nothing else works.
Revaycolizer
Revaycolizer•2y ago
fine then I will come back for feedback
Hampterultimate
Hampterultimate•2y ago
Sure, goodluck!
Revaycolizer
Revaycolizer•2y ago
thanks just few minutes I will be done
Hampterultimate
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 😱
Revaycolizer
Revaycolizer•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
Hampterultimate•2y ago
hmmm, I feel like you might not be creating your apis properly. Have you made APIs before in your project?
Revaycolizer
Revaycolizer•2y ago
nope
Hampterultimate
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
Hampterultimate•2y ago
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
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
Revaycolizer
Revaycolizer•2y ago
i will
Want results from more Discord servers?
Add your server