Skip to main content
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.
Unlike other modules, Storage operations use HTTP requests rather than WebSocket messages.

​
Methods

​
Upload File

upload({ file }) Upload a file to the current room: 
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.

​
Get File URL

getUrl({ key }) Get the URL for a previously uploaded file: 
const url = await client.storage.getUrl({ key: 'uploads/image.png' });

​
List Files

getAll(opts?) List all files in the current room, optionally filtered: 
// 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,
});
OptionTypeDescription
mimeTypestring | string[]Filter by MIME type. Use a trailing slash for categories (e.g., 'image/'). Can be an array for OR matching.
userIdstringFilter by the user who uploaded the files.
Returns an array of StorageFile objects.

​
Delete File

delete({ key }) Delete a file by its storage key: 
await client.storage.delete({ key: 'uploads/image.png' });

​
Examples

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('');
}