[SOLVED] How to store image inside Appwrite bucket given by user in the file upload input field

Possible workflow, without function

1. Upload file on bucket & get id of file
2. Submit form with this reference

Let me try

Hi @Susmita , let us know if it doesn't

@Bouahaza's suggestion is perfect in my opinion.

Something I do, which is a tiny bit different from the suggestion is this:

• Have a bucket for all images
• Have an attribute in a collection for storing the appropriate file ID.
• When a user wants to upload an image that's only accessible by them, I execute a cloud function that takes the image and userID as an input. I then create a file in the bucket with permissions for that user only, and store the fileId in the document as needed.

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?

Are all the stored images the same size?

No

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

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

What platform are you building on?

Next.js, Tailwind

Are you using next/image or the <img> tage?

next/image was giving some errors, so I'm using <img> tag

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.

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

let me try

sure

Solved

[SOLVED] How to store image inside Appwrite bucket given by user in the file upload input field

i had the same doubt regarding image upload. If you don't can you share any github repo to understand as an example. Or any code snippets.
Thanks 😃