floral flicker
I'm creating a kind of note keeper where a user can upload a thumbnail cover related to their notes. This is my DB structure. Everything is working fine and things are getting rendered when I'm trying to list documents.
But when a user is trying to upload an image, it's not taking and also I don't know how to do that using storage() inside a form.
This is my code
opal rapids
you need to use bucket for that (or image base64 but it's not recommended)
floral flicker
you need to use bucket for that (or image base64 but it's not recommended)
how to do that while creating a document?
opal rapids
Really depends of your workflow.. Imagine, when a user create an account, you create a bucket for him, with permission. Like that he can upload image on bucket, and you image field contain a reference to
To access storage endpoint from client side : https://appwrite.io/docs/storage#createFile
Possible workflow, without function
floral flicker
Let me try
strange moth
Hi @floral flicker , let us know if it doesn't
umbral karma
@opal rapids's suggestion is perfect in my opinion.
Something I do, which is a tiny bit different from the suggestion is this:
floral flicker
Hi <@846370506806001724> , let us know if it doesn't
It worked!!
But there's another issue now.
When images are previewed, they are of different sizes due to which UI is not looking good. How to fix that?
umbral karma
When images are previewed, they are of different sizes due to which UI is not lo...
Are all the stored images the same size?
floral flicker
Are all the stored images the same size?
No
umbral karma
If they are, then this is weird. But if they're not the same size, then that's the intended way for this to work.
You can try resizing them on the client-side
floral flicker
You can try resizing them on the client-side
Yeah, I tried but the problem is with the images which are small in size are even getting smaller and the bigger ones are getting to the perfect size of the card
umbral karma
What platform are you building on?
floral flicker
Next.js, Tailwind
umbral karma
Are you using next/image or the <img> tage?
floral flicker
next/image was giving some errors, so I'm using <img> tag
umbral karma
next/image has two props width and height that take in logical pixels. So if you pass in 100 for both of them, all images should be 100x100. If not perfect 100x100, they'll be close to it
Cuz i think next/image maintains the aspect ratio. not sure.
umbral karma
`next/image` was giving some errors, so I'm using `<img>` tag
okay the <img> definitely is more flexible. Wrap the <img> with a div of your chosen size. Then make the <img> fill up the div
should work
floral flicker
should work
let me try
umbral karma
let me try
sure