> ## Documentation Index
> Fetch the complete documentation index at: https://docs.collab-kit.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Storage

> Upload, list, and manage files scoped to rooms.

The Storage module provides file upload and management capabilities scoped to the current room. Files are stored in Cloudflare R2 and served via HTTP.

Access it via `client.storage`.

<Note>
  Unlike other modules, Storage operations use HTTP requests rather than WebSocket messages.
</Note>

<Note>
  Editors can upload and delete files. Viewers can list and read files, but upload and delete are blocked client-side for viewer sessions.
</Note>

## Methods

### Upload File

**`upload({ file })`**

Upload a file to the current room:

```typescript theme={null}
const fileInput = document.querySelector('input[type="file"]');
const file = fileInput.files[0];

const { key, url } = await client.storage.upload({ file });
console.log('Uploaded:', url);
```

Returns an [`UploadResult`](/types/storage#uploadresult).

### Get File URL

**`getUrl({ key })`**

Get the URL for a previously uploaded file:

```typescript theme={null}
const url = await client.storage.getUrl({ key: 'uploads/image.png' });
```

### List Files

**`getAll(opts?)`**

List all files in the current room, optionally filtered:

```typescript theme={null}
// All files
const files = await client.storage.getAll();

// Filter by MIME type
const images = await client.storage.getAll({ mimeType: 'image/' });

// Filter by user
const myFiles = await client.storage.getAll({ userId: client.userId });

// Combine filters
const myImages = await client.storage.getAll({
  mimeType: 'image/',
  userId: client.userId,
});
```

| Option     | Type                 | Description                                                                                                   |
| ---------- | -------------------- | ------------------------------------------------------------------------------------------------------------- |
| `mimeType` | `string \| string[]` | Filter by MIME type. Use a trailing slash for categories (e.g., `'image/'`). Can be an array for OR matching. |
| `userId`   | `string`             | Filter by the user who uploaded the files.                                                                    |

Returns an array of [`StorageFile`](/types/storage#storagefile) objects.

### Delete File

**`delete({ key })`**

Delete a file by its storage key:

```typescript theme={null}
await client.storage.delete({ key: 'uploads/image.png' });
```

## Examples

### Image Gallery

```typescript theme={null}
async function renderGallery() {
  const images = await client.storage.getAll({ mimeType: 'image/' });

  const gallery = document.getElementById('gallery');
  gallery.innerHTML = images.map((img) => `
    <div class="gallery-item">
      <img src="${img.url}" alt="${img.filename}" />
      <p>${img.filename} - ${img.uploadedBy ?? 'Unknown'}</p>
    </div>
  `).join('');
}
```