LiveFile: upload and share files in collaborative apps

LiveFile makes it easy to upload, store, and share files directly inside Liveblocks Storage, our sync engine for building multiplayer apps.

Chris Nicholas on July 27th

LiveFile: upload and share files in collaborative apps

Product updates Liveblocks Storage Collaboration

Ready to get started?

Join thousands of companies using Liveblocks to build multiplayer experiences for people and agents.

Get started for free

LiveFile: upload and share files in collaborative apps

LiveFile makes it easy to upload, store, and share files directly inside Liveblocks Storage, our sync engine for building multiplayer apps.

Chris Nicholas on July 27th

Today, we’re introducing LiveFile, a new way to upload and share files directly within our sync engine, Liveblocks Storage.

Uploading files

In collaborative applications, such as canvases and text editors, users often need to share files as part of their work. The simplest example is inserting an image into a whiteboard, which everyone in the room should see immediately.

Uploading an image to a collaborative canvas with LiveFile

Another example is pasting media or files into a collaborative text editor.

Uploading a file to a collaborative text editor with LiveFile

Previously, Liveblocks Storage could only store JSON-like data, and you could not upload files—but today we’re introducing a new way to upload and share files as part of your Storage document.

Introducing LiveFile

LiveFile is a new Storage data type that allows you to upload and share files as part of your Storage document. This means you no longer need to upload files to a third-party service to share them with other users in your room. Plus, when you update files, other users in the room will see the changes live.

Sharing an uploaded image with other users in a Liveblocks room

LiveFile supports any file type, not only images. Documents, .zip archives, presentations, and more can be inserted into your app and made available with a download button.

Start uploading files

To get started, use useUploadFile to upload a file, then attach the returned LiveFile to your Storage document inside a mutation.

import { useMutation, useUploadFile } from "@liveblocks/react/suspense";
function UploadFile() {  const uploadFile = useUploadFile();
  const addFileToStorage = useMutation(({ storage }, liveFile) => {    storage.set("myFile", liveFile);  }, []);
  const handleFileChange = useCallback(async (file) => {    const liveFile = await uploadFile(file);    addFileToStorage(liveFile);  }, []);
  return (    <label>      <input        type="file"        onChange={(e) => handleFileChange(e.currentTarget.files[0])}      />      ⬆️ Upload file    </label>  );}

To access the file URL in your application, first read the LiveFile from Storage with useStorage, then get its URL with useFileUrl. In the example above, the file is stored under the "myFile" property.

import { useFileUrl, useStorage } from "@liveblocks/react/suspense";
function DownloadFile() {  const myFile = useStorage((root) => root.myFile);  const fileUrl = useFileUrl(myFile);
  return (    <a href={fileUrl} download>      ⬇️ Download file    </a>  );}

For more details, explore the LiveFile API reference.

Server-side uploads

You can also upload files from the server with liveblocks.uploadFile, then add them to your Storage document with mutateStorage.

import { Liveblocks } from "@liveblocks/node";
const liveblocks = new Liveblocks({  secret: "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const roomId = "my-room-id";const file = new File(["Hello world"], "my-file.txt");
const liveFile = await liveblocks.uploadFile({  roomId,  file,});
await liveblocks.mutateStorage(roomId, ({ root }) => {  root.set("myFile", liveFile);});

This is particularly useful in combination with agentic workflows that perform background processing on files. An example is using AI SDK to generate images, which will be shared with connected users in your application.

import { Liveblocks } from "@liveblocks/node";import { openai } from "@ai-sdk/openai";import { generateImage } from "ai";
const liveblocks = new Liveblocks({  secret: "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const roomId = "my-room-id";
const {  images: [image],} = await generateImage({  model: openai.image("gpt-image-1"),  prompt: "A futuristic cityscape at sunset",  n: 1,  size: "1024x1024",});
const file = new File([image.uint8Array], "my-generated-image.png", {  type: image.mediaType,});
const liveFile = await liveblocks.uploadFile({  roomId,  file,});
await liveblocks.mutateStorage(roomId, ({ root }) => {  root.set("myGeneratedImage", liveFile);});

A REST API is also available for server-side uploads.

Whiteboard example

We’ve updated our Tldraw-powered collaborative whiteboard to use LiveFile for uploads, enabling media sharing without a third-party service. There’s a live demo below—try uploading an image or video to the canvas.

If you’d like to copy this whiteboard into your application, download the Tldraw Whiteboard repository from our example gallery.

Get started now

LiveFile is available today in public beta. To try it, update your Liveblocks packages with the following command.

$npx liveblocks upgrade

If you’re currently using Liveblocks 3.17 or below, follow our upgrade guides before updating.

Contributors

Contributors include:

2 authors

Product updates Liveblocks Storage Collaboration

Ready to get started?

Join thousands of companies using Liveblocks to build multiplayer experiences for people and agents.

Get started for free

Uploading files

Another example is pasting media or files into a collaborative text editor.

Previously, Liveblocks Storage could only store JSON-like data, and you could not upload files—but today we’re introducing a new way to upload and share files as part of your Storage document.

Introducing LiveFile

LiveFile supports any file type, not only images. Documents, .zip archives, presentations, and more can be inserted into your app and made available with a download button.

Start uploading files

To get started, use useUploadFile to upload a file, then attach the returned LiveFile to your Storage document inside a mutation.

import { useMutation, useUploadFile } from "@liveblocks/react/suspense";
function UploadFile() {  const uploadFile = useUploadFile();
  const addFileToStorage = useMutation(({ storage }, liveFile) => {    storage.set("myFile", liveFile);  }, []);
  const handleFileChange = useCallback(async (file) => {    const liveFile = await uploadFile(file);    addFileToStorage(liveFile);  }, []);
  return (    <label>      <input        type="file"        onChange={(e) => handleFileChange(e.currentTarget.files[0])}      />      ⬆️ Upload file    </label>  );}

import { useFileUrl, useStorage } from "@liveblocks/react/suspense";
function DownloadFile() {  const myFile = useStorage((root) => root.myFile);  const fileUrl = useFileUrl(myFile);
  return (    <a href={fileUrl} download>      ⬇️ Download file    </a>  );}

For more details, explore the LiveFile API reference.

Server-side uploads

You can also upload files from the server with liveblocks.uploadFile, then add them to your Storage document with mutateStorage.

import { Liveblocks } from "@liveblocks/node";
const liveblocks = new Liveblocks({  secret: "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const roomId = "my-room-id";const file = new File(["Hello world"], "my-file.txt");
const liveFile = await liveblocks.uploadFile({  roomId,  file,});
await liveblocks.mutateStorage(roomId, ({ root }) => {  root.set("myFile", liveFile);});

import { Liveblocks } from "@liveblocks/node";import { openai } from "@ai-sdk/openai";import { generateImage } from "ai";
const liveblocks = new Liveblocks({  secret: "sk_prod_xxxxxxxxxxxxxxxxxxxxxxxx",});
const roomId = "my-room-id";
const {  images: [image],} = await generateImage({  model: openai.image("gpt-image-1"),  prompt: "A futuristic cityscape at sunset",  n: 1,  size: "1024x1024",});
const file = new File([image.uint8Array], "my-generated-image.png", {  type: image.mediaType,});
const liveFile = await liveblocks.uploadFile({  roomId,  file,});
await liveblocks.mutateStorage(roomId, ({ root }) => {  root.set("myGeneratedImage", liveFile);});

A REST API is also available for server-side uploads.

Whiteboard example

If you’d like to copy this whiteboard into your application, download the Tldraw Whiteboard repository from our example gallery.

Get started now

LiveFile is available today in public beta. To try it, update your Liveblocks packages with the following command.

$npx liveblocks upgrade

If you’re currently using Liveblocks 3.17 or below, follow our upgrade guides before updating.

Contributors

Contributors include:

2 authors

LiveFile: upload and share files in collaborative apps

Ready to get started?

Related blog posts

Comments: private threads and a natural home for AI

What's new in Liveblocks: June 2026

What's new in Liveblocks: May 2026

LiveFile: upload and share files in collaborative apps

Uploading files

Introducing LiveFile

Start uploading files

Server-side uploads

Whiteboard example

Get started now

Contributors

Ready to get started?

Related blog posts

Comments: private threads and a natural home for AI

What's new in Liveblocks: June 2026

What's new in Liveblocks: May 2026

Uploading files

Introducing LiveFile

Start uploading files

Server-side uploads

Whiteboard example

Get started now

Contributors