[SOLVED] Examples for Image Uploading using Appwrite Function

I had the same doubt regarding image upload. Can anyone share any GitHub repo to understand as an example. Or any code snippets. Thanks

the approach is to make appwrite function and then trigger image creation and storing metadata in collection

HTML: https://github.com/Meldiron/authui/blob/main/src/lib/form.svelte#L404-L409 JS: https://github.com/Meldiron/authui/blob/main/src/lib/form.svelte#L144-L164

From demo app: https://www.authui.site/ (where you can upload your company logo to have branded page)

thanks @Meldiron for building this

https://appwrite.io/docs/client/storage?sdk=web-default#storageCreateFile

Aaand here is how it "links" to collection: https://github.com/Meldiron/authui/blob/main/src/lib/form.svelte#L97-L103

You simply have string attribute and store file's ID there. You get file ID after creating file.

Later you can use this fileId to render image, like this: https://github.com/Meldiron/authui/blob/main/src/lib/modal.svelte#L129-L134

thanks jyoti

but do you have any code in react 🥲

ah i dont think so

maybe this gives you an idea ?

You'll need to get the file and then pass it to the function.

1. https://github.com/stnguyen90/places/blob/9c55f7097f79a12eeb7eda8fa450e4d961b07cc4/src/features/place-dialog/PhotosTab.tsx#L100
2. https://github.com/stnguyen90/places/blob/9c55f7097f79a12eeb7eda8fa450e4d961b07cc4/src/services/appwrite.ts#L291

Understood

Thanks @Steven @joeyouss

[SOLVED] Examples for Image Uploading using Appwrite Function