Quickstart

​

1. Create the bucket in Studio

1. Open your project and choose the development environment.
2. In the sidebar choose Storage (under Services).
3. Click New bucket.
4. Set Name to avatars.
5. Turn on Public bucket (anyone with an object’s URL may read it; uploads, listing and deletes still follow the rules below).
6. Under Who may upload new objects, open the rule picker and choose Custom condition. Add one rule: Compare values… with $object.segments.0 equals $auth.user_id. This means a person can upload only under their own id.
7. Under Uploads, set Accepted types to image/* and Largest file to 2 (MB).
8. Click Create.

​

2. Upload a file in Studio

​

3. Upload from your app

const user = await pawabase.auth.getUser();
const avatars = pawabase.storage.from("avatars");

input.addEventListener("change", async () => {
  const file = input.files?.[0];
  if (!file) return;
  const stored = await avatars.upload(`${user.id}/avatar.png`, file);
  img.src = avatars.getPublicUrl(stored.key);
});

stored = pb.storage.from_("avatars").upload(f"{user_id}/avatar.png", open("avatar.png", "rb"), content_type="image/png")
src = pb.storage.from_("avatars").public_url(stored["key"])

​

4. Prove the rule

await avatars.upload("someone-else/avatar.png", file);     // throws PermissionError

​

What you have now

• A public bucket that only accepts images up to 2 MB.
• A rule that keeps people to their own folder.
• A URL you can put in an <img>.