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

Possible workflow, without function

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

TL;DR

User had a doubt about how to store images in an Appwrite bucket given by the user in a file upload input field. They asked for a GitHub repo or code snippets for reference. Another user suggested wrapping the `<img>` tag with a `div` of the desired size and making the `<img>` fill up the `div`. The user mentioned using `next/image` but it was giving errors, so they switched to using the `<img>` tag. They also mentioned that when previewing the images, they are of different sizes and asked for a solution to fix that. Another user suggested resizing the images on the client-side. The

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?

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