File Uploads with tRPC

Intro to File Uploads

Understanding multipart/form-data

Server-side Setup: Express & Parsers

Basic Express Server with File Middleware

const express = require('express');
const fileUpload = require('express-fileupload');
const app = express();
const port = 3000;

// Enable file upload middleware
app.use(fileUpload());

app.get('/', (req, res) => {
  res.send('Express server running!');
});

// Simple endpoint to show file access
app.post('/upload-test', (req, res) => {
  if (!req.files || Object.keys(req.files).length === 0) {
    return res.status(400).send('No files uploaded.');
  }
  
  // 'myFile' refers to the name attribute in the HTML input
  let uploadedFile = req.files.myFile;
  
  console.log('File received:', uploadedFile.name);
  res.send(`File '${uploadedFile.name}' received.`);
});

app.listen(port, () => {
  console.log(`Server on http://localhost:${port}`);
});

Integrating tRPC into the Server

import express from 'express';
import fileUpload from 'express-fileupload';
import * as trpcExpress from '@trpc/express';
import { initTRPC } from '@trpc/server';

// Initialize tRPC (we'll define context and router later)
const t = initTRPC.context<any>().create();
const appRouter = t.router({}); // Empty router for now

// tRPC context function
function createContext({ req, res }: { req: express.Request, res: express.Response }) {
  return { req, res, uploadedFiles: req.files }; // Files are here!
}

const app = express();
const port = 3000;

// 1. Enable file upload middleware FIRST
app.use(fileUpload());

// 2. Add tRPC middleware (after fileUpload)
app.use(
  '/trpc',
  trpcExpress.createExpressMiddleware({
    router: appRouter,
    createContext,
  })
);

app.get('/', (req, res) => {
  res.send('tRPC file upload server running!');
});

app.listen(port, () => {
  console.log(`Server on http://localhost:${port}`);
});

Defining tRPC Context with File Access

import express from 'express';
import type { UploadedFile } from 'express-fileupload';

// Extend Express Request type (in a real project, this would be in a types file)
declare global {
  namespace Express {
    interface Request {
      files?: { [key: string]: UploadedFile | UploadedFile[] };
    }
  }
}

export function createContext({
  req,
  res,
}: { req: express.Request; res: express.Response }) {
  return {
    req,
    res,
    // This makes the files available in `ctx.uploadedFiles`
    uploadedFiles: req.files,
  };
}

Building the File Upload Mutation

import { initTRPC } from '@trpc/server';
import { z } from 'zod';
import type { UploadedFile } from 'express-fileupload';

// Assuming 't' is initialized with context containing 'uploadedFiles'
const t = initTRPC.context<any>().create(); // Replace 'any' with your actual context type

export const appRouter = t.router({
  uploadFile: t.procedure
    .input(z.object({
      description: z.string().optional(),
    }))
    .mutation(async ({ ctx, input }) => {
      const { uploadedFiles } = ctx;

      if (!uploadedFiles || Object.keys(uploadedFiles).length === 0) {
        throw new Error('No files found in request.');
      }

      // Access the file by the name given in FormData (e.g., 'myFile')
      const file = uploadedFiles.myFile as UploadedFile;

      if (!file) {
        throw new Error('File field "myFile" is missing.');
      }

      const savePath = `./uploads/${file.name}`; // Store temporarily
      await file.mv(savePath); // Move file to destination

      return {
        fileName: file.name,
        size: file.size,
        description: input.description || 'No description',
        message: 'File uploaded successfully!',
      };
    }),
});

Client-side: Creating FormData

<!-- Example HTML snippet -->
<input type="file" id="fileInput" />
<script>
  const fileInput = document.getElementById('fileInput');
  
  function prepareFormData() {
    const file = fileInput.files[0];
    if (!file) {
      console.log('No file selected.');
      return null;
    }

    const formData = new FormData();
    // 'myFile' must match the field name expected by the server
    formData.append('myFile', file);
    formData.append('description', 'A document from the user.');

    console.log('FormData prepared!');
    return formData;
  }
</script>

Sending Files to the tRPC Endpoint

<!-- index.html -->
<!DOCTYPE html>
<html>
<head>
  <title>Upload File</title>
</head>
<body>
  <input type="file" id="fileInput" />
  <button onclick="uploadFile()">Upload</button>

  <script>
    async function uploadFile() {
      const fileInput = document.getElementById('fileInput');
      const file = fileInput.files[0];

      if (!file) {
        alert('Please select a file first.');
        return;
      }

      const formData = new FormData();
      formData.append('myFile', file); // 'myFile' matches server's expected name
      formData.append('description', 'A file from client!');

      try {
        const response = await fetch('http://localhost:3000/trpc/uploadFile', {
          method: 'POST',
          body: formData,
        });

        const result = await response.json();
        if (response.ok) {
          alert('Upload successful: ' + JSON.stringify(result));
        } else {
          alert('Upload failed: ' + JSON.stringify(result));
        }
      } catch (error) {
        console.error('Error uploading file:', error);
        alert('An error occurred during upload.');
      }
    }
  </script>
</body>
</html>

Quick Check

Recap & Next Steps