> ## 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 uploads

> Direct-to-Convex uploads with previews and limits. The standard pattern.

Add file uploads to any feature in 5 minutes. The pattern is the same regardless of file type.

**Time:** \~15 min. **Difficulty:** Beginner.

## Foundation prompt

```text theme={null}
Add file upload support to {feature}. Use Convex file storage. Limit:
images only (PNG, JPG, WebP), max 5 MB each, max 10 per {entity}.

Show a drop zone in the form. On upload, generate a thumbnail preview.
Show upload progress per file. Validate type and size on the server.
```

## What vly generates

* A `generateUploadUrl` mutation.
* Client-side direct-upload code (no proxy through your function).
* A schema field for the storage IDs.
* Preview UI for uploaded files.
* Server-side validation in the mutation that records the upload.

## Tips

<Tip>
  **Always validate on the server.** Client-side checks are UX-friendly but bypassable.
</Tip>

## Related

<CardGroup cols={3}>
  <Card title="Convex file storage" icon="hard-drive" href="/convex/file-storage">
    The reference.
  </Card>

  <Card title="Architecture: file uploads" icon="upload" href="/architecture/file-uploads">
    Patterns.
  </Card>

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


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