File Storage
useConvexStorage
Low-level composable for Convex storage operations.
Low-level composable for storage operations. Auto-imported when storage is enabled.
Usage
app/components/Storage.vue
<script setup lang="ts">
import { api } from '#convex/api'
const { generateUploadUrl, getUrl, remove } = useConvexStorage(api)
// Get a reactive URL for a stored file
const fileUrl = getUrl('storage_id_here')
// Generate upload URL for direct upload
const uploadUrl = await generateUploadUrl.mutate()
// Delete a file
await remove.mutate({ storageId: 'storage_id_here' })
</script>
Parameters
| Parameter | Type | Description |
|---|---|---|
api | API | The Convex API object from #convex/api |
Return Values
| Property | Type | Description |
|---|---|---|
generateUploadUrl | { mutate: () => Promise<string> } | Get URL for uploading |
getUrl | (storageId: string) => Ref<string | null> | Reactive file URL |
remove | { mutate: (args) => Promise<void> } | Delete a file |
Getting File URLs
The getUrl function returns a reactive ref that updates when the file URL changes:
app/components/FilePreview.vue
<script setup lang="ts">
import { api } from '#convex/api'
const props = defineProps<{ storageId: string }>()
const { getUrl } = useConvexStorage(api)
const url = getUrl(props.storageId)
</script>
<template>
<img v-if="url" :src="url" alt="Uploaded file">
<p v-else>
Loading...
</p>
</template>
Direct Upload
Use generateUploadUrl for direct browser uploads to Convex storage:
app/components/DirectUpload.vue
<script setup lang="ts">
import { api } from '#convex/api'
const { generateUploadUrl } = useConvexStorage(api)
async function uploadFile(file: File) {
// Get upload URL
const uploadUrl = await generateUploadUrl.mutate()
// Upload directly to Convex
const response = await fetch(uploadUrl, {
method: 'POST',
headers: { 'Content-Type': file.type },
body: file,
})
const { storageId } = await response.json()
return storageId
}
</script>
For uploads with progress tracking, use useConvexUpload instead.
Deleting Files
Remove files from storage:
app/components/FileManager.vue
<script setup lang="ts">
import { api } from '#convex/api'
const { remove } = useConvexStorage(api)
async function deleteFile(storageId: string) {
await remove.mutate({ storageId })
}
</script>