0Pricing
tRPC End-to-End Type Safe APIs · Lesson

File Uploads with tRPC

Integrate file upload functionality into your tRPC mutations using multipart/form-data and appropriate parsers.

Intro to File Uploads

Welcome to handling file uploads with tRPC! Unlike simple JSON data, files (like images or documents) require a special approach because they are often binary data.

tRPC itself focuses on type-safe API definitions. It doesn't natively handle the low-level parsing of file uploads. Instead, it integrates seamlessly with the underlying HTTP server framework, like Express or Next.js, to manage this.

Understanding multipart/form-data

When you upload a file via a web form, the data is typically sent using the multipart/form-data encoding type. This is different from application/json, which is common for most tRPC requests.

  • multipart/form-data: Allows sending both text fields and binary files in a single request.
  • application/json: Primarily for structured text data, not ideal for large binary files.

Your server needs a special 'parser' to correctly interpret multipart/form-data requests.

All lessons in this course

  1. Efficient Batching Requests
  2. Implementing Optimistic Updates
  3. File Uploads with tRPC
  4. Infinite Queries and Cursor-Based Pagination
← Back to tRPC End-to-End Type Safe APIs