> ## Documentation Index
> Fetch the complete documentation index at: https://vlyai-1c28d863.mintlify.site/llms.txt
> Use this file to discover all available pages before exploring further.

# File storage

> Upload files directly to Convex from the client. Get a storage ID; serve via Convex's CDN.

The full reference for Convex file storage. See [Features → file storage](/features/data/file-storage) for the executive overview.

## Server side

```typescript convex/files.ts theme={null}
import { mutation } from "./_generated/server";
import { v } from "convex/values";

export const generateUploadUrl = mutation({
  args: {},
  handler: async (ctx) => await ctx.storage.generateUploadUrl(),
});

export const setAvatar = mutation({
  args: { storageId: v.id("_storage") },
  handler: async (ctx, { storageId }) => {
    const u = await ctx.auth.getUserIdentity();
    if (!u) throw new Error("Not signed in");
    await ctx.db.patch(u.subject as Id<"users">, { avatarStorageId: storageId });
  },
});
```

## Client side

```typescript theme={null}
const generateUrl = useMutation(api.files.generateUploadUrl);
const setAvatar   = useMutation(api.files.setAvatar);

async function upload(file: File) {
  const url           = await generateUrl();
  const result        = await fetch(url, { method: "POST", body: file });
  const { storageId } = await result.json();
  await setAvatar({ storageId });
}
```

## Serving

```typescript theme={null}
const url = await ctx.storage.getUrl(storageId);
// returns a signed CDN URL
```

For long-lived public URLs (e.g., user avatars in `<img>` tags), serve via the URL — Convex handles CDN caching automatically.

## Deleting

```typescript theme={null}
await ctx.storage.delete(storageId);
```

## Limits

* **100 MB max per file** by default.
* **Storage cap** depends on plan (see [Usage limits](/features/billing/usage-limits)).

## Related

<CardGroup cols={3}>
  <Card title="File uploads recipe" icon="upload" href="/recipes/file-uploads">
    Worked example.
  </Card>

  <Card title="Cloudinary" icon="image" href="/integrations/cloudinary">
    Advanced image transformations.
  </Card>

  <Card title="AWS S3" icon="cloud" href="/integrations/aws-s3">
    For files >100 MB.
  </Card>
</CardGroup>


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.