Events are exciting in nature, but a wall of text in an app… isn’t the most exciting. We can liven this up by using images within our application, particularly allowing our event submitters to attach a photo that represents that particular event whether it's an actual photo or something that looks along the lines of what to expect.

But this isn’t as simple as storing a string of text in a Database. Images and files generally are complex and need more support to handle them, which is where the Appwrite Storage service comes in.

We’ll first learn how we can read a file from a form’s filepicker input and read the information about an image like the width and height, which will help us to display that image confidently later on. We’ll then see how we can spin up a new Storage Bucket, start to upload our files, store a reference to that image in the related event Document, and even display the images once permissions are configured.

What you’ll Learn

• Read a file from a form filepicker input
• Extract metadata like width and height from a selected image
• Create a new Appwrite Storage Bucket
• Configure permissions for a Bucket
• Upload an image file to a Bucket
• Store a file ID and metadata as a reference on a Database Collection Document
• Generate a preview URL for an image file

Resources

• Create a File
• Storage
• Get File for Preview