---
name: bijection-transloadit
description: "Evaluate and integrate the Transloadit component with Bijection."
---

# Transloadit

Upload and media processing

- Package: @bijectionhq/transloadit
- Category: Media
- Status: Preview
- License: Apache-2.0
- Bijection source (repository access required): https://github.com/bijectionhq/transloadit/tree/a26a7c41bee57e8ce8fef983dcf6b488b896766d
- Upstream: https://github.com/transloadit/convex/tree/44b4bbd85e3481cbd3524716318c61796967ff25
- Documentation: https://docs.bijection.com/components/using
- Directory: https://bijection.com/components/transloadit

## Get the source

Bijection repository access is required. Request access at https://bijection.com/contact.

```sh
git clone https://github.com/bijectionhq/transloadit.git
cd transloadit
git checkout a26a7c41bee57e8ce8fef983dcf6b488b896766d
```

## Before using this component

Read the package README at the recorded revision for setup, dependencies, and API examples. Upstream documentation describes the original package and may differ from the Bijection adaptation. This is a source candidate for evaluation. Catalog inclusion does not establish npm availability or runtime qualification. Check compatibility with your SDK and deployment before adoption. External providers run their own compute.

## Integration workflow

1. Read the source README and package manifest at the recorded revision.
2. Confirm the required SDK, dependency availability, and runtime compatibility.
3. Follow the component's documented setup and configuration. Never invent an npm install command from a catalog package name.
4. Keep credentials in the project's existing secret store.
5. Follow the project's execution rules for verification and report what was actually checked.

## Original upstream skill

The following guidance describes @transloadit/convex. Its installation commands and APIs refer to the upstream package. Evaluate compatibility with the Bijection source separately.


> Agents: read this skill fully before writing code that uses Transloadit. Follow the installation and configuration steps exactly.

# Transloadit

## Instructions

This component provides a complete integration between Convex and Transloadit's media processing platform. It handles creating Assemblies with Templates or inline Steps, generates signed upload options for secure client-side uploads with Uppy, and persists Assembly status and results in Convex tables. The component includes webhook ingestion with signature verification and provides typed API wrappers for managing the entire media processing lifecycle.

### Installation

```bash
npm install @transloadit/convex
```

Current npm version: `@transloadit/convex@0.6.1`

## Use cases

- **Build media galleries** where users upload images/videos that need automatic resizing, format conversion, or thumbnail generation before storage
- **Process user-generated content** by creating secure upload flows that resize avatars, compress videos, or extract metadata without exposing API secrets to clients
- **Handle file transformations** in real-time applications where you need to track processing status and display results as they complete
- **Implement batch media processing** for applications that need to apply consistent transformations across multiple files with webhook-based status updates
- **Create secure upload workflows** using Uppy where authentication and processing parameters are generated server-side but uploads happen client-side

## How it works

The component follows a secure server-first pattern where Convex actions create signed `assemblyOptions` using `createAssembly` or `createAssemblyOptions`, keeping your Transloadit auth secret server-side. Clients use these options with Uppy and `@uppy/transloadit` to upload directly to Transloadit for processing.

Webhooks are handled through `handleWebhookRequest` which verifies signatures and can either process immediately or queue via `queueWebhook` for durable processing. The component maintains two tables: `assemblies` for tracking processing status and metadata, and `results` for storing individual output files grouped by `assemblyId` and `stepName`.

The main API is exposed through `makeTransloaditAPI` which provides functions like `refreshAssembly`, `getAssemblyStatus`, and `listResults` for building real-time UIs. You configure it by registering the component in `convex.config.ts` and setting `TRANSLOADIT_KEY` and `TRANSLOADIT_SECRET` environment variables.

## When NOT to use

- When a simpler built-in solution exists for your specific use case
- If you are not using Convex as your backend
- When the functionality provided by Transloadit is not needed

## Resources

- [npm package](https://www.npmjs.com/package/%40transloadit%2Fconvex)
- [GitHub repository](https://github.com/transloadit/convex)
- [Live demo](https://convex-demo.transload.it/)
- [Convex Components Directory](https://www.convex.dev/components/transloadit/convex)
- [Convex documentation](https://docs.convex.dev)