> For the complete documentation index, see [llms.txt](https://docs.whereby.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.whereby.com/reference/react-hooks-reference/useroomconnection/file-sharing.md).

# File Sharing

Participants can share files with the room. Files are uploaded and then posted to the room as chat messages, so a shared file shows up both in `state.fileUploads` (the local upload progress for files **you** send) and on the `file` property of the relevant `chatMessages` entry (for every participant, including the sender).

### Actions

| Action         | Signature                                | Description                                                                                                                                                                                              |
| -------------- | ---------------------------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `sendFiles`    | `(files: File[]) => void`                | Validate, upload, and share the given files with the room. Invalid files are rejected locally (see Validation); valid files are still uploaded. Only one `sendFiles` request can be in flight at a time. |
| `downloadFile` | `(file: ChatFileShare) => Promise<Blob>` | Download a shared file. Resolves with the file contents as a `Blob`. Rejects if the download fails.                                                                                                      |

```tsx
const { state, actions } = useRoomConnection(roomUrl, { localMedia });

// Share files (e.g. from an <input type="file" /> or drag-and-drop)
function onFilesSelected(files: File[]) {
    actions.sendFiles(files);
}

// Download a shared file from a chat message
async function onDownload(file: ChatFileShare) {
    const blob = await actions.downloadFile(file);
    const url = URL.createObjectURL(blob);
    // ...trigger a download or preview with `url`, then URL.revokeObjectURL(url)
}
```

### State

| Field                  | Type                         | Description                                                                     |
| ---------------------- | ---------------------------- | ------------------------------------------------------------------------------- |
| `fileUploads`          | `FileUpload[]`               | The files you have shared this session, with per-file upload status.            |
| `chatMessages[n].file` | `ChatFileShare \| undefined` | Present on chat messages that carry a shared file. Pass this to `downloadFile`. |

#### `FileUpload`

```ts
interface FileUpload {
    id: string;
    name: string;
    size: number;
    type: string;
    status: "uploading" | "sent" | "error";
    error?: FileShareError;
}
```

#### `ChatFileShare`

```ts
interface ChatFileShare {
    downloadUrl: string;
    name: string;
    size: number;
    type: string;
    key: string;
    id?: string;
}
```

#### `FileShareError`

```ts
type FileShareError =
    | "file_sharing_not_available" // file sharing is not available for this room
    | "file_sharing_not_enabled"   // file sharing is disabled for this room
    | "not_in_a_room_session"      // no active room session to share into
    | "upload_failed"              // the upload to storage failed
    | "too_many_files"             // more than MAX_FILES_PER_UPLOAD files in one call
    | "unsupported_file_type"      // file type is not in ACCEPTED_FILE_TYPES
    | "file_too_large";            // file exceeds MAX_FILE_SIZE
```

### Validation

`sendFiles` validates files on the client before uploading, mirroring the limits the backend enforces, so you can surface failures immediately:

* **More than `MAX_FILES_PER_UPLOAD` (10) files in a single call** fails the whole batch — every file is marked `status: "error"` with `error: "too_many_files"` and nothing is uploaded.
* Otherwise, each file is checked individually. A file whose type is not in `ACCEPTED_FILE_TYPES` is marked `unsupported_file_type`, and a file larger than `MAX_FILE_SIZE` is marked `file_too_large`. **Rejected files are skipped; the remaining valid files are still uploaded and shared.**

Inspect `state.fileUploads` to show progress and per-file errors in your UI.

#### Exported constants

These are re-exported from `@whereby.com/browser-sdk/react` so you can validate in your own UI (for example, to configure a dropzone) before calling `sendFiles`:

```ts
import { MAX_FILES_PER_UPLOAD, MAX_FILE_SIZE, ACCEPTED_FILE_TYPES } from "@whereby.com/browser-sdk/react";
```

| Constant               | Value                      | Description                                   |
| ---------------------- | -------------------------- | --------------------------------------------- |
| `MAX_FILES_PER_UPLOAD` | `10`                       | Maximum number of files per `sendFiles` call. |
| `MAX_FILE_SIZE`        | `15728640` (15 MB)         | Maximum size, in bytes, of a single file.     |
| `ACCEPTED_FILE_TYPES`  | `Record<string, string[]>` | Map of accepted MIME type to file extensions. |

**Supported formats:** `.doc`, `.docx`, `.pdf`, `.rtf`, `.xlsx`, `.csv`, `.txt`, `.mp3`, `.wav`, `.gif`, `.jpg`, `.jpeg`, `.png`, `.webp`, `.mp4`, `.mov`, `.webm`, `.mkv`.


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter, and the optional `goal` query parameter:

```
GET https://docs.whereby.com/reference/react-hooks-reference/useroomconnection/file-sharing.md?ask=<question>&goal=<endgoal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is optional and describes the broader end goal you are ultimately trying to accomplish on behalf of the user. GitBook uses it to tailor the answer towards what is most useful for that goal.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.